HTML canvas bezierCurveTo() na paraan
Mga kahulugan at paggamit
bezierCurveTo() Mga paraan upang magdagdag ng isang punto sa kasalukuyang path gamit ang tinukoy na kontrol points ng tatlong beses na bezier curve.
Mga tagubilin:Ang tatlong beses na bezier curve ay nangangailangan ng tatlong puntos. Ang unang dalawang puntos ay ginagamit bilang kontrol points sa tatlong beses na bezier na kalkulasyon, ang ikatlong puntos ay ang pangwakas na punto ng kurva. Ang pangwakas na punto ng kurva ay ang huling punto sa kasalukuyang path. Kung ang path ay wala, gamitin ang beginPath() at moveTo() Mga paraan upang tanggapin ang pangwakas na punto.
- Pangwakas na punto: moveTo(
20,20) - Kontrol point 1: bezierCurveTo(
20,100,200,100,200,20) - Kontrol point 2: bezierCurveTo(20,100,
200,100,200,20) - Pangwakas na punto: bezierCurveTo(20,100,200,100,
200,20)
Mga tagubilin:Pangwakas, tingnan ang quadraticCurveTo() na paraan。Mayroon itong isang kontrol point, hindi dalawa.
Mga halimbawa
Ipagkakita ng isang tatlong beses na bezier curve:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
การเขียน
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
ค่าประกาศ
| ประกาศ | คำอธิบาย |
|---|---|
| cp1x | ตำแหน่ง x ของจุดควบคุมเบเซอร์แบลอาที่หนึ่ง |
| cp1y | ตำแหน่ง y ของจุดควบคุมเบเซอร์แบลอาที่หนึ่ง |
| cp2x | ตำแหน่ง x ของจุดควบคุมเบเซอร์แบลอาที่สอง |
| cp2y | ตำแหน่ง y ของจุดควบคุมเบเซอร์แบลอาที่สอง |
| x | ตำแหน่ง x ของจุดสิ้นสุด |
| y | ตำแหน่ง y ของจุดสิ้นสุด |
การสนับสนุนเบราเซอร์
ตัวเลขในตารางระบุเวอร์ชั่นของเบราเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ：Internet Explorer 8 และเวอร์ชั่นต่อเนื่องไม่สนับสนุนสิ่งที่กล่าวว่า <canvas> อิเล็กทรอนิกส์
