HTML Canvas 線

インスタンス

// 画布の作成：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 新しいパスを定義：
ctx.beginPath();
// 起点を定義：
ctx.moveTo(0, 0);
// 終点を定義：
ctx.lineTo(200, 100);
// 描画：
ctx.stroke();

自分で試してみる

キャンバスライン描画

ラインの描画はキャンバスのパスを使用します：

メソッド

beginPath() メソッドは新しいパスを開始します。何も描画しませんが、新しいパスを定義します。

moveTo() メソッドは線の起点を定義します。何も描画しませんが、起点を設定します。

lineTo() メソッドは線の終点を定義します。何も描画しませんが、終点を設定します。

stroke() メソッドは実際に線を描画します。デフォルトの筆跡色は黒です。

lineWidth 属性

lineWidth 属性はキャンバス上に描画する際に使用する線の幅を定義します。

stroke() メソッドを呼び出す前に設定する必要があります。

インスタンス

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

自分で試してみる

strokeStyle 属性

strokeStyle 属性はキャンバス上に描画する際に使用するスタイルを定義します。

stroke() メソッドを呼び出す前に設定する必要があります。

インスタンス

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

自分で試してみる

lineCap 属性

lineCap 属性は線の端のスタイル（butt、round、または square）を定義します。

デフォルトは square（四角形）です。

stroke() メソッドを呼び出す前に設定する必要があります。

インスタンス

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

自分で試してみる

参照：

CodeW3C.comの完全なCanvasリファレンスマニュアル