HTML5 Canvasを試してみる

古郡 (2011年5月 7日 15:10)
流通システム部 / HTML5

IE9がHTML5 Canvasに対応し、日本語版もリリースされたので
少しCanvasの使い方を勉強しようと思いJavaScriptのコードを書いてみました。

コードは水面に広がる波紋のように、Canvas上のランダムな位置から
円が広がっていくだけの単純なものになります。

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style type="text/css">
  html,bydy{
    margin: 0;
    padding: 0;
  }
  </style>
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>

JavaScriptコード

//波紋オブジェクト
function wave(){
  this.x = 0;
  this.y = 0;
  this.radius = 0;
  this.lineWidth = 0;
}
window.addEventListener('load', function(){
  var canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth - 30;
  canvas.height = window.innerHeight - 30;
  // 波紋オブジェクト保存用の配列
  var waves = new Array();
  // 描画関数
  var draw = function(){
    // canvas オブジェクトを取得する
    var context = canvas.getContext("2d");
    // canvas クリア
    context.clearRect( 0, 0, canvas.width, canvas.height );
    // 波紋オブジェクト追加
    var obj = new wave();
    obj.x = Math.round(Math.random()*(canvas.width));
    obj.y = Math.round(Math.random()*(canvas.height));
    waves.push(obj);
    // 波紋オブジェクト削除
    if (waves.length > 50){
      waves.shift();
    }
    // 画像を描画する。
    for (var i = 0; i < waves.length; i ++) {
      var obj = waves[i];
      //波紋の半径変更
      obj.radius = obj.radius + 3;
      //波紋の太さ変更
      if (obj.radius < 50) {
        obj.lineWidth = 3;
      } else if (obj.radius < 200){
        obj.lineWidth = 2;
      } else {
        obj.lineWidth = 1;
      }
      context.lineWidth = obj.lineWidth;
      context.beginPath();
      context.arc(obj.x, obj.y, obj.radius, 0, Math.PI*2, false);
      context.stroke();
      waves[i] = obj;
    }
  };
  setInterval( draw, 60);
},false);

HTMLはCanvasのみが存在する簡単なものとなります。

JavaScriptのコードを簡単に解説すると2～7行目は波紋オブジェクトのコンストラクタの定義になります。
波紋オブジェクトは円の中心点x,yと半径radiusそして線の太さであるlineWidthを持っています。

8行目でwindowのload時に実行する無名関数を登録しています。
実際にやりたいことは15行目以降のdraw関数の中になります。
draw関数ではまずCanvasを一度クリアしています。（19行目）
その後波紋オブジェクトを配列に追加しています。（21～24行目）
波紋オブジェクトを無限に持たせないために一定数を超えたら配列からオブジェクトを削除しています。(26～28行目)
今回は50個までと限定しました。
最後に配列をループさせ、波紋オブジェクトを順番に描画していきます。（30～47行目）
このタイミングで波紋オブジェクトの半径を大きくし、線の太さも変更しています。
実際のCanvas上の描画処理は43～45行目になりますが、このあたりはwebで検索すれば
すぐに見つかると思うので調べたい方は自分で検索してみてください。

最後に49行目でsetIntervalを使用し描画関数が一定時間ごとに実行されるようにします。

これはIE9でも動かせるし、当然Chrome,Firefoxバージョンが古くなければ動きます。
興味がある方は26行目の波紋オブジェクトの最大個数や33行目の円の半径の変更サイズ、49行目のsetIntervalの時間を変えてみて遊んでみてください。

ちなみに波紋オブジェクトの最大個数を1000して私のパソコンで動かした場合、Chrome11ではそこまでの影響はありませんでしたが、IE9では途中から動きがかなり遅くなりました。
IE9のJavaScriptの処理速度はまだまだChromeには追い付いていないみたいですね。

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

HTML5 Canvasを試してみる

システム開発のアイロベックスは、創業23年を迎える
プロフェッショナル集団です。