HTML DOM Canvas オブジェクト

<canvas>要素はHTMLページ内のビットマップエリアを定義します。

Canvas APIは、JavaScriptがキャンバス上にグラフィックを描画できるようにします。

Canvas APIは、形状、線、曲線、ボックス、テキスト、画像、色、回転、透明度、およびその他のピクセル操作を描画できます。

CanvasをHTMLに追加する

HTMLページのどこにでも<canvas>タグを使用してcanvas要素を追加できます：

例

<canvas id="myCanvas" width="300" height="150"></canvas>

自分で試してみてください

Canvas要素にアクセスする方法

HTML DOM メソッドgetElementById()を使用して<canvas>要素にアクセスできます：

const myCanvas = document.getElementById("myCanvas");

キャンバス上に描画するには、2D 上下文オブジェクトを作成する必要があります：

const ctx = myCanvas.getContext("2d");

ノート

HTML <canvas> 要素自体には描画機能がありません。

どの種類のグラフィックを描画するかは、JavaScriptを使用する必要があります。

getContext() メソッドは、描画ツール（メソッド）を持つオブジェクトを返します。

キャンバス上に描画する方法

2D 上下文オブジェクトを作成した後、キャンバス上に描画することができます。

以下の fillRect() メソッドは、左上角が 20,20 位置にある、幅 150ピクセル、高さ 100ピクセルの黒い矩形を描画します：

例

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

自分で試してみてください

色を使用して

fillStyle 属性は、描画オブジェクトの塗りつぶし色を設定します：

例

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

自分で試してみてください

新しい <canvas> 要素を document.createElement() メソッドを使用して作成し、その要素を現在の HTML ページに追加することができます：

例

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

自分で試してみてください

パス

キャンバス上に描画する一般的な方法は：

1. パスを開始 - beginPath()
2. ポイントに移動 - moveTo()
3. パス内に描画 - lineTo()
4. パスを描画 - stroke()

例

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

自分で試してみてください