HTML 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>