HTMLキャンバスarc()メソッド

❮HTMLキャンバスリファレンス

サークルを作成します。

あなたのブラウザはHTML5canvastagをサポートしていません。

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

ブラウザのサポート

表の数字は、このメソッドを完全にサポートする最初のブラウザバージョンを示しています。

Method
arc() Yes 9.0 Yes Yes Yes

定義と使用法

arc()メソッドは、円弧/曲線を作成します(円または円の一部を作成するために使用されます)。

ヒント: arc()を使用して円を作成するには:開始角度を0に設定し、終了角度を2 * Math.PIに設定します。

ヒント:ストローク()または 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構文: context .arc(x、y、r、sAngle、eAngle、反時計回り);

パラメータ値

Parameter Description Play it
x The x-coordinate of the center of the circle
y The y-coordinate of the center of the circle
r The radius of the circle
sAngle The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
eAngle The ending angle, in radians
counterclockwise Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.

❮HTMLキャンバスリファレンス