プログラミング

JavaScript で Canvas 描画

最終更新： 22/04/2025
1 分の読み

Canvas 要素と JavaScript を使用した図形の描画

Web 開発において、HTML5 の 要素は非常に強力で柔軟なツールです。これにより、ブラウザ上で動的にグラフィックを描画することができます。Canvas を使用すると、画像や図形、アニメーションなどをリアルタイムで描くことができ、ゲーム開発やインタラクティブなコンテンツ制作に不可欠な要素となっています。この技術を活用するためには、JavaScript で Canvas API を使って図形を描画する方法を理解する必要があります。

以下では、Canvas 要素の基本的な使い方から、JavaScript を使用して図形を描画する方法について詳しく説明します。

関連記事

1. Canvas 要素の基本

HTML5 の 要素は、指定された領域内に描画を行うためのキャンバスを提供します。まず、HTML ファイル内で Canvas 要素を作成する必要があります。

html
<canvas id="myCanvas" width="500" height="500">canvas>

この例では、id 属性に「myCanvas」を設定し、幅と高さを 500 ピクセルに指定しています。これが描画を行う領域となります。

2. JavaScript で Canvas を操作する

Canvas 上で描画を行うためには、JavaScript を使用してそのコンテキストを取得し、描画操作を行います。以下のコードは、Canvas 要素を操作するための基本的な JavaScript の構造を示しています。

html
<script>
  // Canvas 要素を取得
  var canvas = document.getElementById("myCanvas");
  // 描画コンテキストを取得 (2D の場合)
  var ctx = canvas.getContext("2d");
script>

ここで重要なのは、getContext("2d") メソッドです。このメソッドは、2D 描画を行うための描画コンテキストを返します。これを使って様々な図形を描くことができます。

3. 基本的な図形の描画

3.1. 線を描く

Canvas では、beginPath() でパスの開始を示し、moveTo() で始点を設定し、lineTo() で線を描くことができます。最後に stroke() を呼び出すことで線が描画されます。

javascript
ctx.beginPath(); // パスを開始
ctx.moveTo(50, 50); // 始点 (50, 50)
ctx.lineTo(200, 50); // 終点 (200, 50)
ctx.stroke(); // 線を描画

3.2. 長方形を描く

長方形を描くには、rect() メソッドを使います。このメソッドは、長方形の位置とサイズを指定するための引数を取ります。

javascript
ctx.beginPath();
ctx.rect(50, 100, 200, 100); // 始点 (50, 100)、幅 200、高さ 100 の長方形
ctx.stroke(); // 長方形を描画

fill() メソッドを使えば、長方形を塗りつぶすこともできます。

javascript
ctx.fillStyle = "blue"; // 塗りつぶしの色を指定
ctx.fill(); // 塗りつぶす

3.3. 円を描く

円を描くためには、arc() メソッドを使用します。円の中心、半径、開始角度、終了角度を指定します。デフォルトでは反時計回りで描画されます。

javascript
ctx.beginPath();
ctx.arc(150, 150, 70, 0, Math.PI * 2); // 中心 (150, 150)、半径 70、角度 0 から 360 度
ctx.stroke(); // 円を描画

円を塗りつぶしたい場合は、fill() メソッドを使用します。

javascript
ctx.fillStyle = "red"; // 塗りつぶしの色を指定
ctx.fill(); // 円を塗りつぶす

4. 図形のスタイル設定

Canvas では、図形を描画する際に色や線の太さ、線のスタイルなどを設定することができます。

4.1. 線の色と太さ

線の色を変更するには、strokeStyle プロパティを使います。また、線の太さは lineWidth プロパティで設定します。

javascript
ctx.strokeStyle = "green"; // 線の色を緑に設定
ctx.lineWidth = 5; // 線の太さを 5 ピクセルに設定

4.2. 塗りつぶしの色

図形を塗りつぶす色は、fillStyle プロパティで指定します。

javascript
ctx.fillStyle = "yellow"; // 塗りつぶしの色を黄色に設定

4.3. 線のスタイル

lineCap プロパティは、線の端の形状を設定します。例えば、round は丸い端を、square は直角の端を作ります。

javascript
ctx.lineCap = "round"; // 線の端を丸くする

5. アニメーションの作成

Canvas は、動的なコンテンツやアニメーションの作成にも使用できます。アニメーションを作成するためには、requestAnimationFrame() メソッドを使って繰り返し描画を行います。

以下の例では、Canvas 上で移動する円を描画します。

javascript
var x = 50; // 初期位置

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 前の描画を消去
  ctx.beginPath();
  ctx.arc(x, 150, 30, 0, Math.PI * 2); // 新しい位置に円を描画
  ctx.fill();
  x += 2; // 円を右に移動
  if (x > canvas.width) x = 0; // 画面外に出たら左端に戻る
  requestAnimationFrame(animate); // アニメーションを再実行
}

animate(); // アニメーション開始

このコードでは、clearRect() を使用して前のフレームを消去し、requestAnimationFrame() で再帰的にアニメーションを更新します。

6. イベントとインタラクション

Canvas では、ユーザーからの入力に反応して図形を描画することもできます。たとえば、マウスのクリックや移動に応じて図形を描くことができます。

javascript
canvas.addEventListener("click", function(event) {
  var x = event.offsetX; // クリックした位置の x 座標
  var y = event.offsetY; // クリックした位置の y 座標
  ctx.beginPath();
  ctx.arc(x, y, 30, 0, Math.PI * 2); // クリックした位置に円を描画
  ctx.fill();
});

このコードでは、Canvas 上でクリックされた位置に円を描画するイベントリスナーを設定しています。

7. まとめ

Canvas 要素と JavaScript を使用すると、Web ページ上で動的にグラフィックを描画することができます。基本的な図形の描画から、アニメーションやインタラクションまで、さまざまな機能を活用することが可能です。Canvas API は非常に強力で、インタラクティブなコンテンツやゲームを作成するための重要なツールとなります。

Canvas を活用することで、ユーザーとのインタラクションを深め、魅力的な視覚的体験を提供することができます。

最終更新： 22/04/2025
1 分の読み
Back to top button