ตัวอย่าง
วาดเส้นโค้ง 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() | ใช่ | 9.0 | ใช่ | ใช่ | ใช่ |
ความหมายและการใช้งาน
quadraticCurveTo() วิธีการเพิ่มชี้ไปที่เส้นทางปัจจุบันโดยใช้จุดควบคุมที่ระบุว่าเป็นตัวแทนของความโค้ง Bezier กำลังสอง
กำลังสองโค้ง Bezier ต้องใช้สองจุด จุดแรกเป็นจุดควบคุมที่ใช้ในการคำนวณ Bezier กำลังสองและจุดที่สองคือจุดสิ้นสุดสำหรับเส้นโค้ง จุดเริ่มต้นสำหรับเส้นโค้งเป็นจุดสุดท้ายในเส้นทางปัจจุบัน หากเส้นทางที่ไม่ได้อยู่ใช้ beginPath() และ moveTo() วิธีการที่จะกำหนดจุดเริ่มต้น
จุดเริ่มต้น:
moveTo (20,20) จุดควบคุม:
quadraticCurveTo (20,100, 200,20) จุดสิ้นสุด:
quadraticCurveTo (20,100, 200,20) เคล็ดลับ: ตรวจสอบ bezierCurveTo() วิธีการมันมีอยู่สองจุดควบคุมแทนหนึ่ง
| ไวยากรณ์ javascript: | context.quadraticCurveTo(cpx,cpy,x,y); |
|---|
ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ | เล่น |
|---|---|---|
| cpx | X-พิกัดของจุดควบคุม Bezier | เล่น " |
| cpy | พิกัด y ของจุดควบคุม Bezier | เล่น " |
| x | X-พิกัดของจุดสิ้นสุด | เล่น " |
| y | พิกัด y ของจุดสิ้นสุด | เล่น " |