ตัวอย่าง
วาดเส้นโค้ง Bezier กำลังสอง:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke(); ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ความหมายและการใช้งาน
quadraticCurveTo() วิธีการเพิ่มชี้ไปที่เส้นทางปัจจุบันโดยใช้จุดควบคุมที่ระบุว่าเป็นตัวแทนของความโค้ง Bezier กำลังสอง
กำลังสองโค้ง Bezier ต้องใช้สองจุด จุดแรกเป็นจุดควบคุมที่ใช้ในการคำนวณ Bezier กำลังสองและจุดที่สองคือจุดสิ้นสุดสำหรับเส้นโค้ง จุดเริ่มต้นสำหรับเส้นโค้งเป็นจุดสุดท้ายในเส้นทางปัจจุบัน หากเส้นทางที่ไม่ได้อยู่ใช้ beginPath() และ moveTo() วิธีการที่จะกำหนดจุดเริ่มต้น
จุดเริ่มต้น:
moveTo( 20,20 ) จุดควบคุม:
quadraticCurveTo( 20,100 ,200,20) จุดสิ้นสุด:
quadraticCurveTo(20,100, 200,20 ) Tip: ตรวจสอบ bezierCurveTo() วิธีการ มันมีอยู่สองจุดควบคุมแทนหนึ่ง
| ไวยากรณ์ JavaScript: | context quadraticCurveTo( cpx,cpy,x,y ) ; |
|---|
ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ | เล่น |
|---|---|---|
| cpx | พิกัด x ของจุดควบคุม Bezier | เล่น " |
| cpy | พิกัด y ของจุดควบคุม Bezier | เล่น " |
| x | พิกัด x ของจุดสิ้นสุด | เล่น " |
| y | พิกัด y ของจุดสิ้นสุด | เล่น " |