HTML canvas quadraticCurveTo() Method
ตัวอย่าง
วาดเส้นโค้งเบซิเยร์กำลังสอง:
จาวาสคริปต์:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่
| Method | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | Yes | 9.0 | Yes | Yes | Yes |
ความหมายและการใช้งาน
quadraticCurveTo() วิธีการเพิ่มจุดไปยังเส้นทางปัจจุบันโดยใช้จุดควบคุมที่ระบุซึ่งแสดงเส้นโค้งเบซิเยร์กำลังสอง
เส้นโค้งเบซิเยร์กำลังสองต้องการสองจุด จุดแรกคือจุดควบคุมที่ใช้ในการคำนวณเบซิเยร์กำลังสอง และจุดที่สองคือจุดสิ้นสุดของเส้นโค้ง จุดเริ่มต้นของเส้นโค้งคือจุดสุดท้ายในเส้นทางปัจจุบัน หากไม่มีเส้นทาง ให้ใช้ เมธอด beginPath()และ moveTo() เพื่อกำหนดจุดเริ่มต้น
จุดเริ่มต้น:
ย้ายไปยัง( 20,20 )
จุดควบคุม:
quadraticCurveTo ( 20,100 , 200,20)
จุดสิ้นสุด:
quadraticCurveTo (20,100, 200,20 )
เคล็ดลับ:ลองใช้ เมธอดbezierCurveTo() มันมีจุดควบคุมสองจุดแทนที่จะเป็นจุดเดียว
| ไวยากรณ์ JavaScript: | บริบท .quadraticCurveTo( cpx,cpy,x,y ); |
|---|
ค่าพารามิเตอร์
| Parameter | Description | Play it |
|---|---|---|
| cpx | The x-coordinate of the Bézier control point | |
| cpy | The y-coordinate of the Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ การอ้างอิงผ้าใบ HTML