HTML Canvas 形状

インスタンス

例1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

自分で試してみる

キャンバスライン描画

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

メソッド

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

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

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

stroke() メソッドは実際に線を描画します。デフォルトのストロークカラーは黒です。

さらに多くの例

例2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

自分で試してみる

例3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

自分で試してみる

ヒント

矩形を描画する場合、4本の線を描画する必要はありません。

次の章では、以下の使用方法を学びます。 drawRect() 矩形を描画するためのメソッドです。

strokeStyle属性

strokeStyle キャンバスで描画する際に使用するスタイルが定義された属性です。

呼び出す前に stroke() その前に設定する必要があります。

インスタンス

ctx.beginPath();
// 定義矩形
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 定義三角形
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

自分で試してみる

参照してください：

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