quadraticCurveTo()
Canvas quadraticCurveTo() metodi
Misol
Kvadratik Bezier egri chizig‘ini chizing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();
O‘zingiz sinab ko‘ring »
Tavsif
quadraticCurveTo() metodi kvadratik Bezier egri chizig‘ini ifodalovchi boshqaruv nuqtalaridan foydalanib, joriy yo‘lga egri chiziq qo‘shadi.
Yo‘lni chizish uchun stroke() yoki fill() metodidan foydalaning.
Kvadratik Bezier egri chizig‘i uchun ikkita nuqta kerak. Birinchi nuqta — kvadratik Bezier hisob-kitobida ishlatiladigan boshqaruv nuqtasi, ikkinchi nuqta esa egri chiziqning oxirgi nuqtasi. Egri chiziqning boshlang‘ich nuqtasi — joriy yo‘ldagi oxirgi nuqta. Agar yo‘l mavjud bo‘lmasa, boshlang‘ich nuqtani belgilash uchun beginPath() va moveTo() metodlaridan foydalaning.
Boshlang‘ich nuqta: moveTo(20, 20)
Boshqaruv nuqtasi: quadraticCurveTo(20, 100, 200, 20)
Oxirgi nuqta: quadraticCurveTo(20, 100, 200, 20)
Eslatma
bezierCurveTo() metodida bitta emas, ikkita boshqaruv nuqtasi bor.
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)
arcTo() metodi (Yo‘lga aylana qo‘shish)
bezierCurveTo() metodi (Yo‘lga egri chiziq qo‘shish)
Sintaksis
| context.quadraticCurveTo(cpx, cpy, x, y) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| cpx | Bezier boshqaruv nuqtasining x koordinatasi | Sinab ko‘ring » |
| cpy | Bezier boshqaruv nuqtasining y koordinatasi | Sinab ko‘ring » |
| x | Oxirgi nuqtaning x koordinatasi | Sinab ko‘ring » |
| y | Oxirgi nuqtaning y koordinatasi | Sinab ko‘ring » |
Qaytariladigan qiymat
| Yo‘q |
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
quadraticCurveTo() barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!