HTMLのCanvas要素の使い方

HTMLのCanvas要素を使うと、ウェブページ上に図形を描画したり、アニメーションを作成したりすることができます。JavaScriptを使って描画内容をコントロールするのが一般的です。

ここでは、Canvasの基本的な使い方をステップごとに説明します。

1. HTMLに<canvas>要素を配置する

まず、HTMLファイルに<canvas>要素を記述します。width属性とheight属性でキャンバスの大きさを指定し、id属性でJavaScriptから参照できるように名前を付けます。

HTML
<!DOCTYPE html>
<html>
<head>
<title>Canvasの基本</title>
<style>
  canvas {
    border: 1px solid black; /* キャンバスの境界線を引く（任意） */
  }
</style>
</head>
<body>

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

<script>
  // ここにJavaScriptコードを記述します
</script>

</body>
</html>

2. JavaScriptで描画コンテキストを取得する

次に、JavaScriptを使って<canvas>要素を取得し、その要素から描画コンテキストを取得します。2Dグラフィックスを描画する場合は、getContext('2d')を使用します。

JavaScript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctxオブジェクトが、実際に描画命令を出すためのインターフェースとなります。

3. 図形を描画する

描画コンテキスト(ctx)を使って、様々な図形を描画できます。

四角形

  • fillRect(x, y, width, height): 塗りつぶしの四角形を描画します。
  • strokeRect(x, y, width, height): 枠線の四角形を描画します。
  • clearRect(x, y, width, height): 指定された範囲を透明にします。

<!-- end list -->

JavaScript
// 赤い塗りつぶしの四角形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50); // (x座標, y座標, 幅, 高さ)

// 青い枠線の四角形
ctx.strokeStyle = 'blue';
ctx.strokeRect(120, 10, 80, 50);

線 (パス)

線や複雑な図形を描画するには、パスを使用します。

  1. beginPath(): 新しいパスを開始します。
  2. moveTo(x, y): ペンを移動します (描画はしません)。
  3. lineTo(x, y): 現在の位置から指定した位置まで線を描画します。
  4. stroke(): パスに沿って線を描画します。
  5. fill(): パスで囲まれた領域を塗りつぶします。
  6. closePath(): パスを閉じます (始点と終点を結びます)。

<!-- end list -->

JavaScript
// 緑色の線
ctx.beginPath();
ctx.moveTo(50, 80);  // 開始点
ctx.lineTo(150, 180); // 終了点
ctx.strokeStyle = 'green';
ctx.lineWidth = 5;   // 線の太さ
ctx.stroke();        // 線を描画

// 紫色の三角形
ctx.beginPath();
ctx.moveTo(200, 80);
ctx.lineTo(250, 180);
ctx.lineTo(150, 180);
ctx.closePath();     // パスを閉じる
ctx.fillStyle = 'purple';
ctx.fill();          // 塗りつぶし

円・円弧

  • arc(x, y, radius, startAngle, endAngle, anticlockwise): 円や円弧を描画します。
    • x, y: 円の中心座標
    • radius: 半径
    • startAngle, endAngle: 円弧の開始角度と終了角度 (ラジアン単位)
    • anticlockwise: trueの場合、反時計回りに描画 (デフォルトはfalseで時計回り)

<!-- end list -->

JavaScript
// オレンジ色の円
ctx.beginPath();
ctx.arc(75, 150, 40, 0, Math.PI * 2); // Math.PI * 2 で完全な円
ctx.fillStyle = 'orange';
ctx.fill();

// 水色の円弧 (半円)
ctx.beginPath();
ctx.arc(220, 150, 30, 0, Math.PI, false); // 0からπ (180度) まで時計回り
ctx.strokeStyle = 'skyblue';
ctx.lineWidth = 3;
ctx.stroke();

4. スタイルと色

  • fillStyle: 塗りつぶしの色やスタイルを指定します。(例: 'red', '#00FF00', 'rgb(0,0,255)', グラデーションなど)
  • strokeStyle: 線の色やスタイルを指定します。
  • lineWidth: 線の太さを指定します (ピクセル単位)。
  • lineCap: 線の端点の形状を指定します ('butt', 'round', 'square')。
  • lineJoin: 線の接合部分の形状を指定します ('round', 'bevel', 'miter')。
  • globalAlpha: 描画の透明度を指定します (0.0から1.0)。

5. テキストを描画する

  • fillText(text, x, y, [maxWidth]): 塗りつぶしのテキストを描画します。
  • strokeText(text, x, y, [maxWidth]): 枠線のテキストを描画します。
  • font: フォントのスタイルを指定します (例: '30px Arial')。
  • textAlign: テキストの水平方向の配置を指定します ('start', 'end', 'left', 'right', 'center')。
  • textBaseline: テキストの垂直方向のベースラインを指定します ('top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom')。

<!-- end list -->

JavaScript
ctx.font = '24px sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText('こんにちは Canvas!', canvas.width / 2, 40);

6. 画像を描画する

<img>要素や、メモリ上に作成したImageオブジェクトを使って画像を描画できます。

  • drawImage(image, dx, dy): 元のサイズのまま画像を描画します。
  • drawImage(image, dx, dy, dWidth, dHeight): 指定したサイズに拡大・縮小して画像を描画します。
  • drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): 元画像の一部を切り取って、指定したサイズで描画します (スプライトシートなどに利用)。

<!-- end list -->

JavaScript
const img = new Image();
img.src = 'path/to/your/image.png'; // 画像のパス

img.onload = function() { // 画像が読み込まれてから描画
  ctx.drawImage(img, 50, 50, 100, 80); // (画像オブジェクト, x, y, 幅, 高さ)
};

注意: img.onload を使って、画像が完全に読み込まれてからdrawImageを呼び出すようにしてください。そうしないと、画像が表示されないことがあります。

7. アニメーション

Canvasでアニメーションを作成するには、定期的に画面をクリアし、新しい位置や状態で再描画する処理を繰り返します。requestAnimationFrame()メソッドを使うのが一般的で、ブラウザの描画タイミングに合わせて効率的にアニメーションを実行できます。

JavaScript
let x = 0;

function draw() {
  // キャンバスをクリア
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 赤い四角形を描画
  ctx.fillStyle = 'red';
  ctx.fillRect(x, 50, 50, 50);

  // x座標を更新
  x += 1;
  if (x > canvas.width) {
    x = -50; // 左端に戻す
  }

  // 次のフレームをリクエスト
  requestAnimationFrame(draw);
}

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

これはCanvasの基本的な使い方です。より高度な機能として、グラデーション、パターン、影、変形 (拡大縮小、回転、移動)、ピクセル操作などがあります。これらの機能を組み合わせることで、インタラクティブなグラフィックやゲームなど、様々な表現が可能になります。

コメント

コメントを投稿