Canvas arc() methode

Definitie en gebruik

arc() Methode om een arc/boog te maken (gebruikt om een cirkel of deel van een cirkel te maken).

Tip:Om een cirkel te maken met arc(), stel de starthoek in op 0,en stel de eindhoek in op 2*Math.PI.

Tip:Gebruik stroke() of fill() De methode tekent een arc/boog (gebruikt om een cirkel of deel van een cirkel te maken).

Boog/boogstraal
  • Centrum: arc(100,75,50,0*Math.PI,1.5*Math.PI)
  • Starthoek: arc(100,75,50,0,1.5*Math.PI)
  • Eindhoek: arc(100,75,50,0*Math.PI,1.5*Math.PI)

Voorbeeld

Maak een cirkel aan:

Uw browser ondersteunt geen HTML5 canvas tag.

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 = 逆时针。

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.