Canvas API

<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);

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

document.createElement() メソッドを使用して新しい <canvas> 要素を作成し、その要素を既存の 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();

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