HTML5 Canvasのパス

HTML5 CanvasのパスはHTML5キャンバスにさまざまな形状（ライン、円、ポリゴンなど）を描画するため、パスはHTML5キャンバスにさまざまな形状を描画する

HTML5 Canvasのパスは一連のポイントで、これらのポイント間には描画命令があります。例えば、一連のポイント間には直線があり、またはそれらの間には弧があります。

パスはHTML5キャンバスにさまざまな形状（ライン、円、ポリゴンなど）を描画するため、この中心概念を理解することが非常に重要です。

パスの開始および終了 - Path

以下を使用して2D上下文関数beginPath()とclosePath()は、以下のようにパスを開始および終了します：

var　canvas　　=　document.getElementById("ex1");
var　context　=　canvas.getContext("2d");context.beginPath();
//　...パス描画操作
context.closePath();

moveTo()

パスを描画する際には、仮想の「筆」または「指標」を使用します。2D Context関数は、以下のように仮想指標の移動を完了しますmoveTo(x, y)：

context.moveTo(10,10);

この例では、指標を点10、10

lineTo()

このlineTo()関数は、仮想指標の位置から関数に渡された点に線を描画しますlineTo()。これは一例です：

context.beginPath();
context.moveTo(10,10);
context.lineTo(50,50);
context.closePath();

この例では、指標を点10,10それから、その点から点50、50。

lineTo()は、仮想指標をその線の終点に移動することも行います。50,50、同時にキャンバスがその点に線を描画する指示が与えられます。

stroke() + fill()

あなたが指示した2D上下文がパスを描画する前に、実際には何も描画されません。2D上下文stroke()やfill()では、2この操作はD上下文上で完了します。
このstroke()関数は、パス操作で定義された形状の輪郭を描画します。
このfill()関数は、パス操作で定義された形状を塗りつぶします。
以下は、同じ形状にstroke()とfill()を適用した例です：

<canvas　id="ex1"　width="500"　height="75"　style="border:　1px　solid　#cccccc;">
HTML5　Canvas　not　supported
</canvas>
<script>
var　canvas　　=　document.getElementById("ex1");var　context　=　canvas.getContext("2d");
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();</script>

上記のコードの実行結果は以下の通りです：

LineWidth

lineWidthを使用できます 2上下文の属性設定により、様々な筆跡機能を利用して描画される線の太さが設定されます。これは一例です：

context.lineWidth　＝　10;

上記の例は、すべての後続のペンストローク操作の線幅を設定します。10ピクセル。
これは3本の線で、線幅はそれぞれ1、5および10:

線幅が1のとき、線の追加の幅は中心線の外に描画されます。つまり、10,10まで100,10線幅が10の場合、この線は10,5から始まり、10,15、次に水平に伸ばします100,5および100,15そこから。矩形のように。

キャップ（lineCap）

パスを使用してラインを描画する際には、ラインのキャップを設定できます。キャップは線の端の描画方法を定義します。
線幅はlineCap2Dコンテキストの属性は設定できます。以下の値を取ることができます:

• butt

• round

• square

この値buttは、線端が平坦で線に対角線上にあります。
この値roundは、半径が線幅の半分の円角の線の端を生成します。
この値squareは、行の端に矩形を描画し、そのサイズはline width x line widthです。 / 2
これらはラインキャップを説明する例のセットです。すべてのラインの線幅は10最も左のラインはlineCapの値buttを使用しています。中央のラインはlineCapの値roundを使用しています。最も右の行はlineCapの値squareを使用しています。

lineCapの値buttとsquareは、線との差が少し見にくいです。したがって、buttとsquareを使用して近くに描画されたラインの対をいくつか作成しました。上または左にbutt、下または右にsquareを使用します。

ご覧の通り、lineCapの値を使用して、線の端に追加の矩形を描画し、線が少し長くなります。

ライン接続（lineJoin）

lineJoin 2Dコンテキストの属性は、2つの線を結ぶポイントの描画方法を定義します。2つの線を結ぶポイントは「線接続」と呼ばれます。lineJoin属性は以下の値を持つことができます:

• miter

• bevel

• round

これらは行接続を設定する3つのコード例です:

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

miterの結果の値は、線接続に使用する線の角を描画するために線を角にします。
bevelの結果の値は、線接続に使用する線の角を描画するために線を角にします。
roundの結果の値は、線接続に線の角を描画するために線を円角にします。
これらは3つの例です（左から順に）miter、bevel、roundがlineJoin属性の値として使用されます。

arc()

2Dコンテキストの機能arc()はキャンバス上に円弧を描画します。

このarc()関数は使用しています6のパラメータです:

• x: 円弧の中心点のx座標

• y: 円弧の中心点のy座標

• radius: 円弧の半径

• startAngle: 弧の始まりの弧度角度

• endAngle: 弧の終わりの弧度角度

• anticlockwise: 插入方向が反時計回り（時計回りではありません）であるかどうかを設定します。

これはコードサンプルの一例です：

context.lineWidth　＝　3;
var x =　50;
var y =　50;
var radius =　25;
var startAngle = (Math.PI　/　18Math.PIは(Math.PI　*　45;
var endAngle = (Math.PI　/　18Math.PIは(Math.PI　*　90;
var anticlockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.stroke();
context.closePath();

このコードサンプルは、中心が50、50、半径が25ピクセルの範囲で、45度まで続く弧度に注意するかもしれません。18度まで続く弧度に注意するかもしれません。360度です。あなたは、0度から
0度はラジアンに変換されます。

これはキャンバス上に描画されたコードサンプルのようです：

これは同じコードサンプルですが、anticlockwiseをtrueに設定しています：2 * 円を完全に描画するには、startAngleを0に設定し、endAngleを / 18Math.PIは(Math.PI * 360

Dコンテキストには、

20)Dコンテキストには、機能ですが、arcTo()を使用してlineTo()およびの機能を模倣するために使用されます。arc()を省略します。

quadraticCurveTo()

この quadraticCurveTo() 関数は、一点から別の一点に向かって二次ベ塞尔曲線を描画します。この曲線は単一の制御点で制御されます。これはコードサンプルの一例です：

context.lineWidth　＝　3;
var fromX　＝　50;
var fromY　＝　50;
var toX　＝　100;
var toY　＝　50;
var cpX =　75;
var cpY =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.quadraticCurveTo(cpX, cpY, toX, toY);
context.stroke();
context.closePath();

このコードサンプルでは、制御点を使用しています。75、100（cpX、cpY）を描画しました。50、50から100、50の曲線です。結果の曲線は以下の通りです：

キャンバス上の小さな点は、ここに描いた制御点です。これは通常、曲線の一部ではありません。

bezierCurveTo()

この bezierCurveTo() 関数は、一点から別の一点に向かって三次ベセル曲線を描画します。三次ベセル曲線は2個の制御点を持っていますが、二次ベ塞尔曲線は1個の制御点です。これはコードサンプルの一例です：

context.lineWidth　＝　3;
var fromX　＝　50;
var fromY　＝　50;
var toX　＝　300;
var toY　＝　50;
var cp1X　＝　100;
var cp1Y　＝　100;
var cp2X　＝　250;
var cp2Y　＝　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

このコードサンプルでは、制御点を使用しています。100、100（cp1X、cp1Y）および250、100（cp2X、cp2Y）を描画します。50、50から300、50の曲線です。結果の曲線は以下の通りです：

キャンバス上の二つの小さな点は、私が描いた制御点であり、それらの場所をあなたに示すために使用されます。それらは曲線の一部として描かれていません。
これは異なる起点、終点および制御点を使用する例です:

context.lineWidth　＝　3;
var fromX　＝　50;
var fromY　＝　50;
var toX　＝　300;
var toY　＝　50;
var cp1X　＝　100;
var cp1Y　＝　10;
var cp2X　＝　250;
var cp2Y　＝　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

これは対応する曲線です:

同様に、二つの小さな点は明確にレンダリングする制御点です