プログラミング

JavaScriptでキャンバス描画

最終更新： 16/03/2025
1 分の読み

JavaScriptを使用したキャンバス上での描画

JavaScriptは、ウェブブラウザ上で動作するインタラクティブなアプリケーションを作成するために広く使用されています。その中でも、キャンバス要素を使って絵を描いたり、グラフィックを生成したりすることが可能です。この記事では、JavaScriptを使用してウェブページ上に描画を行う方法を詳しく解説します。特に、 要素を使って線を描いたり、図形を描いたりする基本的な手法について説明します。

関連記事

1. 要素とは？

は、HTML5で導入されたグラフィック要素です。この要素は、2Dおよび3Dグラフィックを描画するための領域を提供します。キャンバスを使うことで、画像や図形、アニメーションを動的に描画できます。はそのままでは何も描画されません。JavaScriptを使用して描画を制御する必要があります。

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

上記のコードは、幅500ピクセル、高さ500ピクセルのキャンバスを作成します。このキャンバスの上に描画を行います。

2. JavaScriptでキャンバスにアクセスする

キャンバスにアクセスするためには、getContext()メソッドを使って描画コンテキストを取得する必要があります。描画コンテキストは、キャンバス上に図形や線を描くためのインターフェースです。2D描画を行う場合、getContext("2d")を使用します。

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

このコードでは、myCanvasというIDを持つキャンバス要素を取得し、その2Dコンテキスト（ctx）を変数に格納しています。このctxを使って描画操作を行います。

3. 基本的な図形を描く

3.1. 線を描く

線を描くには、beginPath()、moveTo()、lineTo()、そしてstroke()メソッドを使います。

javascript
ctx.beginPath();
ctx.moveTo(50, 50);  // 始点
ctx.lineTo(200, 50); // 終点
ctx.stroke();        // 描画を実行

上記のコードは、(50, 50)の位置から(200, 50)の位置に直線を描きます。

3.2. 長方形を描く

長方形を描くには、rect()メソッドを使用します。

javascript
ctx.beginPath();
ctx.rect(50, 50, 200, 100); // (x, y, 幅, 高さ)
ctx.stroke();               // 長方形を描画

このコードは、(50, 50)を左上の角として、幅200ピクセル、高さ100ピクセルの長方形を描きます。

3.3. 塗りつぶし付き長方形

fillStyleを設定し、fill()メソッドを使うことで、長方形を塗りつぶすことができます。

javascript
ctx.fillStyle = "blue";    // 塗りつぶし色を指定
ctx.beginPath();
ctx.rect(50, 50, 200, 100); // 長方形の描画
ctx.fill();                 // 塗りつぶし

このコードは、青い色で塗りつぶされた長方形を描画します。

3.4. 円を描く

円を描くには、arc()メソッドを使用します。

javascript
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2);  // (x, y, 半径, 開始角度, 終了角度)
ctx.stroke();                            // 円を描画

このコードは、中心が(150, 150)、半径50ピクセルの円を描きます。

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

JavaScriptでは、キャンバス上でユーザーの操作に応じて描画を変更することも可能です。例えば、マウスクリックやドラッグで線を描くことができます。

4.1. マウスイベントを使った描画

以下のコードは、マウスをクリックした位置から直線を描く簡単な方法です。

javascript
let isDrawing = false;

canvas.addEventListener("mousedown", function(event) {
    isDrawing = true;
    ctx.beginPath();
    ctx.moveTo(event.offsetX, event.offsetY);
});

canvas.addEventListener("mousemove", function(event) {
    if (isDrawing) {
        ctx.lineTo(event.offsetX, event.offsetY);
        ctx.stroke();
    }
});

canvas.addEventListener("mouseup", function() {
    isDrawing = false;
});

このコードでは、ユーザーがキャンバスをクリックしている間、マウスの移動に合わせて線が描かれます。mousedownで描画を開始し、mousemoveで線を描き、mouseupで描画を終了します。

5. アニメーションの追加

キャンバス上でアニメーションを行うためには、requestAnimationFrame()を使用します。これにより、ブラウザが次の描画フレームを準備するタイミングで関数を呼び出すことができます。

javascript
let x = 0;

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 前の描画を消す
    ctx.beginPath();
    ctx.arc(x, 150, 50, 0, Math.PI * 2);
    ctx.fillStyle = "red";
    ctx.fill();
    x += 2;
    if (x > canvas.width) {
        x = 0; // 画面外に出たら戻る
    }
    requestAnimationFrame(animate);
}

animate();

このコードでは、赤い円が左から右に動きます。clearRect()で前のフレームを消し、requestAnimationFrame()でアニメーションを繰り返します。

6. 描画のクリアとリセット

描画した内容を消去したい場合、clearRect()を使用します。このメソッドは、指定した矩形領域をクリアすることができます。

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

このコードは、キャンバス上の全ての描画をクリアします。

7. まとめ

JavaScriptと要素を使って、ウェブブラウザ上で簡単にグラフィックを描画できます。基本的な図形の描画から、インタラクティブな描画、さらにはアニメーションの実装まで、幅広い描画が可能です。これらの基本を理解すれば、さらに高度なグラフィックやインタラクションを実現できるようになります。

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