ตัวอย่าง
วาดเส้นโค้ง 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 ของจุดสิ้นสุด | เล่น " |