arc()
Canvas arc() metodi
Misol
Aylana yarating:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
arc() metodi yo‘lga yoy (egri chiziq) qo‘shadi.
arc() metodi aylana yoki aylananing bir qismini yaratadi.
Yo‘lni chizish uchun stroke() yoki fill() metodidan foydalaning.
Markaz: arc(100, 75, 50, 0 * Math.PI, 1.5 * Math.PI)
Boshlang‘ich burchak: arc(100, 75, 50, 0, 1.5 * Math.PI)
Oxirgi burchak: arc(100, 75, 50, 0 * Math.PI, 1.5 * Math.PI)
Eslatma
Aylana yaratish uchun: boshlang‘ich burchakni 0 ga, oxirgi burchakni esa 2*Math.PI ga teng qilib belgilang.
Yarim aylana yaratish uchun: boshlang‘ich burchakni 0 ga, oxirgi burchakni esa Math.PI ga teng qilib belgilang.
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)
arcTo() metodi (yo‘lga aylana qo‘shish)
bezierCurveTo() metodi (yo‘lga egri chiziq qo‘shish)
quadraticCurveTo() metodi (yo‘lga egri chiziq qo‘shish)
Sintaksis
| context.arc(x, y, r, sAngle, eAngle, counterclockwise) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| x | Aylana markazining x koordinatasi | Sinab ko‘rish » |
| y | Aylana markazining y koordinatasi | Sinab ko‘rish » |
| r | Aylananing radiusi | Sinab ko‘rish » |
| sAngle | Boshlang‘ich burchak, radianlarda (0 — yoy aylanasidagi soat 3 holati) | Sinab ko‘rish » |
| eAngle | Oxirgi burchak, radianlarda | Sinab ko‘rish » |
| counterclockwise | Ixtiyoriy. Chizish soat miliga teskari yoki soat mili bo‘yicha bajarilishini belgilaydi. Standart qiymat — false bo‘lib, u soat mili bo‘yicha yo‘nalishni bildiradi, true esa soat miliga teskari yo‘nalishni bildiradi. | Sinab ko‘rish » |
Qaytariladigan qiymat
| YO‘Q |
Ko‘proq misollar
Misol
To‘q sariq aylana chizing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "orange";
ctx.fill();
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
arc() 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!