ตัวอย่าง
วาดเส้นโค้ง Bezier ลูกบาศก์:
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(); ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| bezierCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ความหมายและการใช้งาน
bezierCurveTo() วิธีการเพิ่มชี้ไปที่เส้นทางปัจจุบันโดยใช้จุดควบคุมที่ระบุว่าเป็นตัวแทนของความโค้ง Bezier ลูกบาศก์
เส้นโค้งเบซิเยลูกบาศก์ต้องมีสามจุด ทั้งสองจุดแรกเป็นจุดควบคุมที่ใช้ในการคำนวณ Bezier ลูกบาศก์และจุดสุดท้ายเป็นจุดสิ้นสุดสำหรับเส้นโค้ง จุดเริ่มต้นสำหรับเส้นโค้งเป็นจุดสุดท้ายในเส้นทางปัจจุบัน หากเส้นทางที่ไม่ได้อยู่ใช้ beginPath() และ moveTo() วิธีการที่จะกำหนดจุดเริ่มต้น
จุดเริ่มต้น
moveTo( 20,20 ) จุดควบคุม 1
bezierCurveTo( 20,100 ,200,100,200,20) จุดควบคุม 2
bezierCurveTo(20,100, 200,100 ,200,20) จุดสิ้นสุด
bezierCurveTo(20,100,200,100, 200,20 ) Tip: ตรวจสอบ quadraticCurveTo() วิธีการ มันมีจุดควบคุมหนึ่งแทนของทั้งสอง
| ไวยากรณ์ JavaScript: | context bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ) ; |
|---|
ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ | เล่น |
|---|---|---|
| cp1x | พิกัด x ของจุดควบคุม Bezier แรก | เล่น " |
| cp1y | พิกัด y ของจุดควบคุม Bezier แรก | เล่น " |
| cp2x | พิกัด x ของจุดควบคุม Bezier ที่สอง | เล่น " |
| cp2y | พิกัด y ของจุดควบคุม Bezier ที่สอง | เล่น " |
| x | พิกัด x ของจุดสิ้นสุด | เล่น " |
| y | พิกัด y ของจุดสิ้นสุด | เล่น " |