HTML リファレンスマニュアル

HTML タグ一覧

HTML canvas arc() メソッド

arc() は Canvas 2D API が円弧パスを描画する方法。円弧パスの中心は (x, y) 位置にあり、半径が r で、anticlockwise（デフォルトは時計回り）で指定された方向から startAngle から描画し、endAngle まで描画します。

HTML canvas リファレンスマニュアル

オンラインサンプル

円を描画する：

サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas arc()メソッドの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
あなたのブラウザは HTML をサポートしていません。5　canvas タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script>　
</body>
</html>

テストを見てみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome および Safari が arc() をサポートしています。メソッド。

注意：Internet Explorer 8 及びその以前のバージョンでは <canvas> 要素をサポートしていません。

定義と用法

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 キャメルケース：	context.arc(x,y,r,sAngle,eAngle,counterclockwise);

パラメータの値

パラメータ	説明
x	円の中心のx座標。
y	円の中心のy座標。
r	円の半径。
sAngle	始端角、ラジアンで計算（円の3時位置は0度です）。
eAngle	終端角、ラジアンで計算。
counterclockwise	オプション。反時計回りに描画するかを規定します。False = 時計回り、true = 反時計回り。

HTML canvas リファレンスマニュアル

HTML: <template> タグ