プログラミング

Canvas画像描画ガイド

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

Canvasを使用した画像描画の完全ガイド

HTML5の要素は、ウェブページ上で動的にグラフィックや画像を描画するために使用されます。この機能をJavaScriptと組み合わせて使用することで、インタラクティブなビジュアルコンテンツを作成することができます。本記事では、を使って画像を描画する方法について詳しく説明します。基本的な使用法から応用的なテクニックまでをカバーしますので、Canvasの活用方法を深く理解できるでしょう。

関連記事

1. の基本的な使用方法

要素は、グラフィックを描画するための領域を定義します。次のコードは、の基本的な構造です。

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

上記のコードでは、500pxの幅と高さを持つ要素を定義しています。この領域にJavaScriptを使ってグラフィックを描画します。描画を行うには、getContext()メソッドを使用して、キャンバスの描画コンテキストを取得する必要があります。最も一般的なのは2dコンテキストです。

javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

2. 直線の描画

上で描画を行うための基本的な操作の1つは、直線を描くことです。直線を描くには、beginPath()で新しいパスを開始し、moveTo()で開始点を指定、lineTo()で終点を指定した後、stroke()で線を描画します。

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

3. 長方形の描画

長方形を描くには、rect()メソッドを使用します。これは四隅の位置と幅、高さを指定することで描画できます。

javascript
ctx.fillStyle = "blue"; // 塗りつぶしの色
ctx.fillRect(50, 100, 150, 100); // 塗りつぶし長方形

ここでは、fillStyleで色を設定し、fillRect()で指定した位置に長方形を描画しています。

4. 円の描画

円を描くには、arc()メソッドを使用します。円を描くためには、円の中心の座標、半径、開始角度、終了角度を指定します。

javascript
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2); // 中心(200,200), 半径50の円
ctx.fillStyle = "green";
ctx.fill(); // 円を塗りつぶす

このコードでは、(200, 200)の位置に半径50の円を描き、fill()で塗りつぶしています。

5. 画像の描画

で最も興味深い機能の1つは、画像を描画できることです。drawImage()メソッドを使用すると、画像をキャンバス上に描画することができます。以下は、画像を読み込んで描画する基本的な方法です。

javascript
const img = new Image();
img.src = 'image.jpg'; // 画像のパスを指定

img.onload = function() {
    ctx.drawImage(img, 50, 50, 200, 200); // 画像を描画
};

ここでは、画像が読み込まれた後にdrawImage()を使用してキャンバス上に描画しています。drawImage()は、画像の座標、幅、高さを指定して描画します。

6. 画像の一部を描画

画像の一部分を描画することも可能です。drawImage()メソッドを使って、画像の一部をキャンバス上に描画できます。

javascript
const img = new Image();
img.src = 'image.jpg';

img.onload = function() {
    ctx.drawImage(img, 50, 50, 200, 200, 0, 0, 100, 100); // 画像の一部を描画
};

ここでは、画像の一部（左上の100×100ピクセル）をに描画しています。

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

Canvasはアニメーションの作成にも使用できます。requestAnimationFrame()を使って、アニメーションのフレームを連続して描画できます。以下は、簡単なアニメーションの例です。

javascript
let x = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 前のフレームを消去
    ctx.fillStyle = "red";
    ctx.fillRect(x, 50, 50, 50); // 赤い長方形を描画
    x += 2; // 位置を更新
    if (x > canvas.width) x = 0; // 画面端に達したらリセット
    requestAnimationFrame(animate); // 次のフレームを要求
}

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

このコードでは、赤い長方形がキャンバス上を移動するアニメーションを作成しています。

8. 画像のフィルタリング

Canvasでは、画像にフィルター効果を追加することもできます。globalCompositeOperationやfilterプロパティを使うことで、画像の表示方法を変更できます。

javascript
ctx.filter = 'grayscale(100%)'; // グレースケール効果
ctx.drawImage(img, 50, 50, 200, 200);

上記のコードは、画像をグレースケールで表示します。filterプロパティを使うことで、他にもぼかしやコントラスト調整などが可能です。

9. Canvasのクリア（リセット）

Canvas上に描いたすべての内容をクリアしたい場合は、clearRect()メソッドを使用します。これにより、指定した領域を透明にし、リセットすることができます。

javascript
ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバス全体をクリア

このコードは、キャンバス上のすべての描画内容を消去します。

10. まとめ

Canvasを使った画像の描画は、非常に柔軟で強力な方法です。直線、長方形、円、画像の描画など、さまざまなグラフィック操作が可能です。さらに、アニメーションや画像処理など、動的なコンテンツの作成にも利用できます。JavaScriptを使ってキャンバスの操作を行うことで、インタラクティブなウェブ体験を提供することができます。

このガイドで紹介した基本的な操作をマスターすれば、さらに高度なグラフィックアプリケーションの開発に進むことができます。Canvasを活用して、より魅力的でインタラクティブなウェブコンテンツを作成しましょう。

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