【JavaScript】Canvas（キャンバス）とは？

Canvas（キャンバス）とは？
Canvasの使用例
四角形を描画する
円を描画する
テキストを描画する
画像を描画する
アニメーションを作成する
まとめ

Canvas（キャンバス）とは？

Canvasは、JavaScriptでグラフィックスを描画するためのHTML5要素の1つです。

Canvas要素は、width（幅）とheight（高さ）属性を指定してHTMLドキュメント内に配置されます。そして、JavaScriptを使用して、描画コンテキスト（context）を作成し、線、形状、テキスト、画像などのグラフィックスを描画することができます。

Canvasを使用することで、WebページやWebアプリケーションでインタラクティブなグラフィックスを実現することができます。

Canvasの使用例

Canvasを使用して以下のようなことができます。

図形や線を描画する：Canvasは、直線、曲線、多角形、円、楕円などの図形を描画することができます。また、色や線の太さ、線の種類などを指定することもできます。
テキストを描画する：Canvasは、フォントやサイズ、スタイルを指定してテキストを描画することができます。また、文字列を回転させたり、影をつけたりすることもできます。
画像を描画する：Canvasは、画像を描画することもできます。画像は、Imageオブジェクトを作成して読み込み、Canvas上に表示することができます。
アニメーションを作成する：Canvasを使用してアニメーションを作成することができます。アニメーションは、複数の図形を連続的に描画することで実現されます。
ユーザーの操作に反応する：Canvasは、マウスのクリックや移動、タッチイベントなど、ユーザーの操作に反応することができます。これにより、インタラクティブなグラフィックスを実現することができます。

Canvasを使用した具体的な描画やアニメーションの実装例を見てみます。

四角形を描画する

// Canvas要素を取得
const canvas = document.getElementById('myCanvas');
// 2D描画コンテキストを取得
const ctx = canvas.getContext('2d');
// 四角形を描画
ctx.fillStyle = 'red'; // 色を指定
ctx.fillRect(10, 10, 50, 50); // (x座標, y座標, 幅, 高さ)

このコードでは、指定されたIDを持つcanvas要素を取得し、その上で2D描画コンテキストを取得しています。

次に、fillStyleプロパティを使用して四角形の色を赤に設定し、fillRect()メソッドを使用して四角形を描画しています。fillRect()メソッドの最初の2つの引数は四角形の左上隅の座標であり、それに続く2つの引数は四角形の幅と高さです。

この例では、四角形の左上隅の座標が(10, 10)であり、幅と高さが50です。したがって、四角形は(10, 10)の位置から始まり、右に50ピクセル、下に50ピクセル広がります。

円を描画する

// Canvas要素を取得
const canvas = document.getElementById('myCanvas');
// 2D描画コンテキストを取得
const ctx = canvas.getContext('2d');
// 円を描画
ctx.fillStyle = 'blue'; // 色を指定
ctx.beginPath();
ctx.arc(50, 50, 30, 0, Math.PI * 2, true); // (中心のx座標, 中心のy座標, 半径, 開始角度, 終了角度, 反時計回りかどうか)
ctx.fill();

[rml_read_more]

テキストを描画する

// Canvas要素を取得
const canvas = document.getElementById('myCanvas');
// 2D描画コンテキストを取得
const ctx = canvas.getContext('2d');
// テキストを描画
ctx.font = '20px serif'; // フォントとサイズを指定
ctx.fillStyle = 'green'; // 色を指定
ctx.fillText('Hello, world!', 10, 50); // (テキスト, x座標, y座標)

画像を描画する

// Canvas要素を取得
const canvas = document.getElementById('myCanvas');
// 2D描画コンテキストを取得
const ctx = canvas.getContext('2d');
// 画像を読み込み
const img = new Image();
img.src = 'image.png';
// 画像を描画
img.onload = function() {
  ctx.drawImage(img, 10, 10); // (画像, x座標, y座標)
};

アニメーションを作成する

// Canvas要素を取得
const canvas = document.getElementById('myCanvas');
// 2D描画コンテキストを取得
const ctx = canvas.getContext('2d');
// アニメーションのフレームごとに呼ばれる関数を定義
function draw() {
  // Canvasをクリア
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 四角形を描画
  ctx.fillStyle = 'red';
  ctx.fillRect(x, 10, 50, 50);
  // x座標を更新
  x += dx;
  // x座標がCanvasからはみ出たら反転
  if (x > canvas.width - 50 || x <