arcTo()
Canvas arcTo() metodi
Misol
Canvas’da ikkita tangens orasida yoy yarating:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Start a path
ctx.beginPath();
ctx.moveTo(20, 20);
// Create a horizontal line
ctx.lineTo(100, 20);
// Create an arc
ctx.arcTo(150, 20, 150, 70, 50);
// Create a vertical line
ctx.lineTo(150, 120);
// Draw the path
ctx.stroke();
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
arcTo() metodi yo‘lga ikkita tangens orasida yoy/egri chiziq qo‘shadi.
Yo‘lni chizish uchun stroke() yoki fill() metodidan foydalaning.
Shuningdek qarang:
beginPath() metodi (yangi yo‘l boshlash)
closePath() metodi (joriy yo‘lni yopish)
moveTo() metodi (yo‘lni nuqtaga ko‘chirish)
lineTo() metodi (yo‘lga chiziq qo‘shish)
fill() metodi (joriy yo‘lni to‘ldirish)
stroke() metodi (joriy yo‘lni chizish)
arc() metodi (yo‘lga aylana qo‘shish)
bezierCurveTo() metodi (yo‘lga egri chiziq qo‘shish)
quadraticCurveTo() metodi (yo‘lga egri chiziq qo‘shish)
Sintaksis
| context.arcTo(x1, y1, x2, y2, r) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| x1 | Yoy boshlanishining x koordinatasi | Sinab ko‘rish » |
| y1 | Yoy boshlanishining y koordinatasi | Sinab ko‘rish » |
| x2 | Yoy oxirining x koordinatasi | Sinab ko‘rish » |
| y2 | Yoy oxirining y koordinatasi | Sinab ko‘rish » |
| r | Yoyning radiusi | Sinab ko‘rish » |
Qaytariladigan qiymat
| YO‘Q |
Ko‘proq misollar
Misol
Ikkita tangens orasida yoy yarating va uni to‘ldiring:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Start a path
ctx.beginPath();
ctx.moveTo(20, 20);
// Create a horizontal line
ctx.lineTo(100, 20);
// Create an arc
ctx.arcTo(150, 20, 150, 70, 50);
// Create a vertical line
ctx.lineTo(150, 120);
// Fill and draw the path
ctx.fill();
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
arcTo() barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
❮ Canvas ma’lumotnomasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!