強火で進め

このブログではプログラム関連の記事を中心に書いてます。

canvasの命令を使って画像を回転させる

HTML5 JavaScript


以下のサイトやライブラリを参考にHTML5で導入されたcanvas処理を使って画像を回転処理を行うプログラムを作ってみました。

こちらでプログラムの動作を確認できます。

ライブラリ

ExplorerCanvas
http://sourceforge.net/project/showfiles.php?group_id=163391

※ExplorerCanvasについてはこちらを参照して下さい。

Canvas - Canvasの使い方 - HTML5.JP
http://www.html5.jp/canvas/how.html

参考にしたサイト

Canvas - 画像を組み込む - HTML5.JP
http://www.html5.jp/canvas/how6.html

Canvas - Canvasリファレンス - HTML5.JP
http://www.html5.jp/canvas/ref.html

プログラム

メインのプログラムは以下の様になっています。

回転( rotate() )を実行しただけでは画像の左上を中心に回転してしまう様なので回転の前後に平行移動( translate() )を行って位置を調整しています。

<html>
<head>
  <title>image rotation</title>
  <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
  <script>

    var cv, ctx, rotDig = 0, rot;
    var img = new Image();
    img.src = "image.jpg";

    function init() {
      cv = document.getElementById("canvas");
      ctx = cv.getContext("2d");

      rotationLoop();
    }

    function rotationLoop() {
      rotDig = (rotDig + 1) % 360;

      ctx.fillRect(0, 0, cv.width, cv.height);

      ctx.save();
      ctx.translate(cv.width/2, cv.height/2);
      // 回転(値はラジアンで指定するため変換を行う)
      rot = rotDig/180*Math.PI;
      ctx.rotate(rot);
      ctx.translate(-img.width/2, -img.height/2);
      ctx.drawImage(img, 0, 0);
      ctx.restore();

      setTimeout(rotationLoop, 50); // タイマーで定期的に rotationLoop() を実行
    }
  </script>
</head>
<body onload="init();">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>