読者です 読者をやめる 読者になる 読者になる

HTML5のcanvas入門メモ

canvas入門メモです。動作確認はgoogle chromeのみで行ないました。

何も無いcanvasを描く

まずは、何も無いcanvasを描きます。
描くためにcanvasタグを使用します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT\
D/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
canvas {
    border: solid 3px #000;
}
</style>
<script type="text/javascript">
window.onload = function() {
     var canvas = document.getElementById('canvas');
     var cc = canvas.getContext('2d');
// ここに描画処理を書いていく
}
</script>
<title></title>
</head>

<body>
<!-- canvas表示 -->
<canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>


何も表示されないcanvasが表示されると思います。
javascriptではcanvasを操作するためのプログラムを書いているのみです。


図形を描く

canvasに図形を描いていきます。
図形を描く処理は主に下記のようなパターンでプログラムを書いていきます。

// 描画パラメータ保存
cc.save();

// 描画設定開始
cc.beginPath();

...描画設定


// 初期化
cc.restore();


例えば、ラインを引く時は下記のようになります。

cc.save();

cc.beginPath();
cc.lineWidth = 5;
cc.lineTo(50, 120);
cc.lineTo(250, 180);
cc.stroke();

cc.restore();

cc.beginPath();の後にラインの太さ、始点と終点を設定しているのが分かると思います。
これにより、canvasに線が引かれるようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT\
D/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
canvas {
   border: solid 3px #000;
}
</style>
<script type="text/javascript">
window.onload = function() {
   var canvas = document.getElementById('canvas');
   var cc = canvas.getContext('2d');

   cc.save();

   // 線を引く
   cc.beginPath();
   cc.lineWidth = 5;
   cc.lineTo(50, 120);
   cc.lineTo(250, 180);
   cc.stroke();

   cc.restore();
   cc.save();

   // 影付き矩形を描く
   cc.beginPath();
   cc.fillStyle = '#F00';
   cc.shadowBlur = 5;
   cc.shadowColor = '#000';
   cc.shadowOffsetX = 5;
   cc.shadowOffsetY = 5;
   cc.fillRect(30, 30, 100, 50);

   cc.restore();
   cc.save();

   // 円を描く
   cc.beginPath();
   cc.strokeStyle = '#00F';
   cc.arc(200, 100, 30, 0, Math.PI * 2, false);
   cc.stroke();

   cc.restore();
};
</script>
<title></title>
</head>

<body>
<canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>

アニメーション

アニメーションは、一定間隔で「canvasのクリア」と「図形の再描画」を行なう処理です。
javascriptでは、setInterval()関数で実装します。
下記のコードは、canvas内を円が跳ね返り回るものです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT\
D/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
canvas {
    border: solid 3px #000;
}
</style>
<script type="text/javascript">
window.onload = function() {
    var canvas = document.getElementById('canvas');
    var cc = canvas.getContext('2d');

    // 円の初期座標
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var r = 30;

    // 速度
    var v_x = 2.0;
    var v_y = 2.0;

    // メインループ
    var loop = function() {

        // 円の座標を変更
        x += v_x;
        y += v_y;


      	// canvasの境界
        if (x - r < 0) {
           x = r;
           v_x *= -1;
        }
        if (x + r > canvas.width) {
           x = canvas.width - r;
           v_x *= -1;
        }
        if (y - r < 0) {
            y = r;
            v_y *= -1;
        }
        if (y + r > canvas.height) {
            y = canvas.height - r;
            v_y *= -1;
        }


      	// 円の描画
        cc.save();

        cc.beginPath();
        cc.clearRect(0, 0, canvas.width, canvas.height);

        cc.restore();

        cc.beginPath();

        cc.strokeStyle = '#00F';
        cc.fillStyle = '#00F';
        cc.arc(x, y, r, 0, Math.PI * 2, false);
        cc.fill();
        cc.stroke();

        cc.restore();


        // 次の実行
        setTimeout(loop, 30);
     };

     // 初期起動
     loop();
};
</script>
<title></title>
</head>

<body>
<canvas id="canvas" width="300" height="200"></canvas>
</body>
</html>


このコードでは「setTimeout(loop,30);」という感じで、実行時間を固定で指定しています。
固定にするのではなくて、FPSの考えを取り入れる方法もあります。
下記のページで、FPSクラスを作って実行間隔を調整している例があります。
今更聞けないcanvasの基礎の基礎 : tech.kayac.com - KAYAC engineers' blog

感想

OpenGLとかDirectXとかでやるような感じで、図形を描けるのがいいですね。
ブラウザが対応していれば、簡単に実行環境がそろってしまうのもすばらしいです。