bezierCurveTo()
Canvas bezierCurveTo() metodi
Misol
Kubik Bezier egri chizig‘ini chizing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();
O‘zingiz sinab ko‘ring »
Tavsif
bezierCurveTo() metodi kubik Bezier egri chizig‘ini ifodalovchi nazorat nuqtalari yordamida yo‘lga egri chiziq qo‘shadi.
Yo‘lni chizish uchun stroke() yoki fill() metodidan foydalaning.
Kubik Bezier egri chizig‘i uchta nuqtani talab qiladi. Dastlabki ikki nuqta kubik Bezier hisob-kitobida ishlatiladigan nazorat nuqtalari, oxirgi nuqta esa egri chiziqning tugash nuqtasidir. Egri chiziqning boshlang‘ich nuqtasi joriy yo‘ldagi oxirgi nuqta hisoblanadi. Agar yo‘l mavjud bo‘lmasa, boshlang‘ich nuqtani belgilash uchun beginPath() va moveTo() metodlaridan foydalaning.
Boshlang‘ich nuqta: moveTo(20, 20)
1-nazorat nuqtasi: bezierCurveTo(20, 100, 200, 100, 200, 20)
2-nazorat nuqtasi: bezierCurveTo(20, 100, 200, 100, 200, 20)
Oxirgi nuqta: bezierCurveTo(20, 100, 200, 100, 200, 20)
Eslatma
quadraticCurveTo() metodida ikkita emas, bitta nazorat 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)
quadraticCurveTo() metodi (yo‘lga egri chiziq qo‘shish)
Sintaksis
| context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) |
Parametr qiymatlari
| Parametr | Tavsif | Sinab ko‘rish |
|---|---|---|
| cp1x | Birinchi Bezier boshqaruv nuqtasining x koordinatasi | Sinab ko‘rish » |
| cp1y | Birinchi Bezier boshqaruv nuqtasining y koordinatasi | Sinab ko‘rish » |
| cp2x | Ikkinchi Bezier boshqaruv nuqtasining x koordinatasi | Sinab ko‘rish » |
| cp2y | Ikkinchi Bezier boshqaruv nuqtasining y koordinatasi | Sinab ko‘rish » |
| x | Oxirgi nuqtaning x koordinatasi | Sinab ko‘rish » |
| y | Oxirgi nuqtaning y koordinatasi | Sinab ko‘rish » |
Qaytariladigan qiymat
| YO‘Q |
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
bezierCurveTo() 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!