HTML canvas arcTo() method
คำอธิบายและการใช้งาน
arcTo() วิธีในการสร้างทางโค้ง/เส้นโค้งระหว่างสองเส้นตรงที่แบบแบ่งของเข็มนาฬิกาในกระดานวาด
คำเตือน：โปรดใช้ stroke() วิธีในการวาดทางโค้งที่แน่นอนในกระดานวาด
ตัวอย่าง
สร้างทางโค้งระหว่างสองเส้นตรงที่แบบแบ่งของเข็มนาฬิกา
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20); // กำหนดจุดเริ่มต้น
ctx.lineTo(100,20); // สร้างเส้นตรงตั้ง
ctx.arcTo(150,20,150,70,50); // สร้างเส้นโค้ง
ctx.lineTo(150,120); // สร้างเส้นตรงตั้ง
ctx.stroke(); // ทำการวาด
รูปแบบ
context.fillRect(x1,y1,x2,y2,r);
ตัวแปรค่า
| ตัวแปร | การอธิบาย |
|---|---|
| x1 | ตำแหน่ง x ของจุดต้นของเส้นรอบโค้ง |
| y1 | ตำแหน่ง y ของจุดต้นของเส้นรอบโค้ง |
| x2 | ตำแหน่ง x ของจุดสิ้นสุดของเส้นรอบโค้ง |
| y2 | ตำแหน่ง y ของจุดสิ้นสุดของเส้นรอบโค้ง |
| r | เส้นรอบโค้ง |
การสนับสนุนโดยเบราเซอร์
ตัวเลขในตารางระบุตัวรุ่นของเบราเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ：Internet Explorer 8 และตัวรุ่นเก่ากว่านี้ไม่สนับสนุนสมรรถนะ <canvas>
