Canvas arc() 方法
คำอธิบายและวิธีใช้
arc() วิธีการสร้างส่วนของวงกลม/เส้นโค้ง (ใช้สำหรับสร้างวงกลมหรือส่วนของวงกลม).
คำเตือน:หากต้องการที่จะสร้างวงกลมด้วย arc() ให้ตั้งมุมเริ่มต้นเป็น 0，ตั้งมุมสิ้นสุดเป็น 2*Math.PI.
คำเตือน:ใช้ stroke() หรือ fill() วิธีการวาดส่วนของวงกลมที่แท้จริงบนกระดานวาด。
- จุดศูนย์: arc(
100,75,50,0*Math.PI,1.5*Math.PI) - มุมเริ่มต้น: arc(100,75,50,
0,1.5*Math.PI) - มุมสิ้นสุด: arc(100,75,50,0*Math.PI,
1.5*Math.PI)
ตัวอย่าง
สร้างวงกลม:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
การใช้งาน
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
ค่าตัวแปร
| ตัวแปร | คำอธิบาย |
|---|---|
| x | ตำแหน่ง x ของจุดศูนย์กลมของวงกลม。 |
| y | ตำแหน่ง y ของจุดศูนย์กลมของวงกลม。 |
| r | เส้นรัศมีของวงกลม。 |
| sAngle | มุมเริ่มต้น ระบุด้วยระยะเวลาเศษ。（ตำแหน่งสายส่วนของวงกลมที่สายสามทางเวลาเท่า 0 องศา）。 |
| eAngle | มุมสิ้นสุด ระบุด้วยระยะเวลาเศษ. |
| counterclockwise | เลือกได้. กำหนดว่าควรวาดตามทิศทางตะวันออกหรือตะวันตก. False = ตะวันตก，true = ตะวันออก. |
การสนับสนุนโดยบราวเซอร์
ตัวเลขในตารางบ่งชี้ว่าเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ:Internet Explorer 8 และเวอร์ชั่นที่เก่ากว่านั้นไม่สนับสนุนองค์ประกอบ <canvas> ตามที่กำหนด
