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

HTMLタグ全覧

HTML canvas arcTo()メソッド

arcTo()はCanvas 2D APIは制御点と半径を基に円弧経路を描画し、現在の描点（前のmoveToやlineToなどの終点）を使用します。現在の描点と指定された制御点1と制御点と接続された直線1と制御点2指定された半径を持つ円の切線として接続された直線を描画し、切線の間の円弧経路を描画します。

HTML canvas 参考マニュアル

オンラインサンプル

画布上で二つの切線の間の円弧を生成します：

JavaScript：

示例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程網(oldtoolbag.com)</title>　
</head>
<body>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();　
ctx.moveTo(20,20);　　　　　　　　　　　//　起點を作成します
ctx.lineTo(100,20);　　　　　　　　　　//　水平線を作成する　
ctx.arcTo(150,20,150,70,50);　//　弧を作成する
ctx.lineTo(150,120);　　　　　　　　　//　垂直線を作成する
ctx.stroke();　　　　　　　　　　　　　　　　//　描画する
</script>
</body>
</html>

テストして見てください ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

定義と使用方法

arcTo() メソッドはキャンバス上の二つの切線間に弧を生成します/曲線。

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

JavaScript 语法：	context.arcTo(x1,y1,x2,y2,r);

パラメータの値

パラメータ	説明
x1	二つの切線の交点の横座標。
y1	二つの切線の交点の縦座標。
x2	第二の切線上の一点の横座標。
y2	第二の切線上の一点の縦座標。
r	弧の半径。

中、最初の線上の任意の点の横・縦座標は前回のポイントの位置であり、この例では 100,20。以下の(x1,y1),(x2,y2,(,100,20) 三点で二つの直線の位置を決定し、半径で弧の位置を決定します。

HTML canvas 参考マニュアル

HTML: <template> タグ