ตัวอย่าง
วาดเส้นโค้ง 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(); ลองตัวเอง» สนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera, Chrome และ Safari สนับสนุน bezierCurveTo() วิธีการ
หมายเหตุ: Internet Explorer 8 และรุ่นก่อนหน้านี้ไม่สนับสนุน <canvas> องค์ประกอบ
ความหมายและการใช้งาน
bezierCurveTo() วิธีการเพิ่มชี้ไปที่เส้นทางปัจจุบันโดยใช้จุดควบคุมที่ระบุว่าเป็นตัวแทนของความโค้ง Bezier ลูกบาศก์
เส้นโค้ง Bezier ลูกบาศก์ต้องมีสามจุด จุดสองจุดแรกเป็นจุดควบคุมที่ใช้ในการคำนวณ Bezier ลูกบาศก์และจุดสุดท้ายเป็นจุดสิ้นสุดสำหรับเส้นโค้ง จุดเริ่มต้นสำหรับเส้นโค้งเป็นจุดสุดท้ายในเส้นทางปัจจุบัน หากเส้นทางที่ไม่ได้อยู่ใช้ beginPath() และ moveTo() วิธีการที่จะกำหนดจุดเริ่มต้น
จุดเริ่มต้น
moveTo (20,20) จุดควบคุม 1
bezierCurveTo (20,100, 200,100,200,20) จุดควบคุม 2
bezierCurveTo (20,100, 200,100, 200,20) จุดสิ้นสุด
bezierCurveTo (20100200100, 200,20) เคล็ดลับ: ตรวจสอบ 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 ของจุดสิ้นสุด | เล่น " |