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

HTML5 Canvas 参考手册

定義と使用方法

arcTo() キャンバス上に二つの切線間の弧/曲線を作成する方法。

ヒント：使用方法： stroke() キャンバス上に正確な弧を描画する方法。

例

二つの切線間に弧を描画する：

ブラウザはHTML5キャンバスタグをサポートしていません。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20);           // 開始点を描画
ctx.lineTo(100,20);          // 水平線を描画
ctx.arcTo(150,20,150,70,50); // 弧を作成します
ctx.lineTo(150,120);         // 垂直線を作成します
ctx.stroke();                // 描画を行います

実際に試してみる

文法

context.fillRect(x1,y1,x2,y2,r);

パラメータの値

パラメータ 説明
x1 弧の起点の x 座標。
y1 弧の起点の y 座標。
x2 弧の終点の x 座標。
y2 弧の終点の y 座標。
r 弧の半径。

ブラウザのサポート

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

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

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

HTML5 Canvas 参考手册