JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5キャンバスで基本のアニメーションを実装する方法

HTML5のcanvas要素には、図形や画像を描画するためのメソッドが用意されており、描画内容を消去することも可能です。これらをJavaScriptと組み合わせることで、キャンバス上で滑らかなアニメーションを表現できます。

キャンバスアニメーションの基本的な仕組み

キャンバスアニメーションは、次の手順を短い間隔で繰り返すことで実現されます。

  • 状態を更新する： 位置や角度などの描画情報を少しずつ変化させる
  • 前のフレームを消去する： 古い描画内容をクリアして残像を防ぐ
  • 再描画する： 新しい状態で図形や画像を描き直す

今回のサンプルでは、setInterval()を使って100ミリ秒ごとに描画関数を呼び出し、現在時刻から算出した角度で画像を回転させています。

サンプルコード

以下のコードを保存してブラウザで開くと、画像が中心を軸に回転するアニメーションを確認できます。

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         var pattern = new Image();
         function animate(){
            pattern.src = '/html5/images/pattern.jpg';
            setInterval(drawShape, 100);
         }
         function drawShape(){
            // DOMを使ってcanvas要素を取得
            var canvas = document.getElementById('mycanvas');

            // canvas非対応の環境では実行しない
            if (canvas.getContext){
               // getContextで2D描画コンテキストを取得
               var ctx = canvas.getContext('2d');
               ctx.fillStyle = 'rgba(0,0,0,0.4)';
               ctx.strokeStyle = 'rgba(0,153,255,0.4)';
               ctx.save();
               ctx.translate(150,150);

               var time = new Date();
               ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
               ctx.translate(0,28.5);
               ctx.drawImage(pattern,-3.5,-3.5);
               ctx.restore();
            } else {
               alert('このデモを表示するにはSafariまたはFirefox 1.5以降が必要です。');
            }
         }
      </script>
   </head>
   <body onload="animate();">
      <canvas id="mycanvas" width="400" height="400"></canvas>
   </body>
</html>

コードのポイント

  • setInterval(drawShape, 100)： 100ミリ秒間隔でdrawShape()を繰り返し呼び出し、アニメーションを継続させます。
  • canvas.getContext('2d')： キャンバスに描画するための2Dコンテキストを取得します。
  • save() / restore()： 座標系の状態を保存・復元し、変換処理が他の描画に影響しないようにします。
  • translate() / rotate()： 原点を移動し、現在時刻に応じて算出した角度で座標系を回転させます。
  • drawImage()： 読み込んだ画像を指定した位置に描画します。

まとめ

このように、canvasの描画メソッドとJavaScriptのタイマー処理を組み合わせるだけで、手軽にアニメーションを実装できます。より滑らかでパフォーマンスの高い動きを目指す場合は、ブラウザの描画タイミングに同期できるrequestAnimationFrame()の利用も検討してみてください。

  1. HTML5 Canvasを使って星を描く方法を解説

    HTMLのcanvas要素に描画を行うには、JavaScriptを使用します。実際に描き始める前に、HTML DOMメソッドであるgetElementById()とgetContext()を使って、キャンバスへの参照と描画コンテキストを取得しておく必要があります。HTMLで星を描くには、canvas要素を利用します。星形を描く際にはlineTo()メソッドが便利です。このメソッドはx座標とy座標の2つのパラメータを受け取り、その位置へ線を引くことで図形を形成していきます。まず、HTMLドキュメント内にキャンバスを配置する方法から見ていきましょう。サンプルコード以下のコードを実行すると、HTML

  2. HTML5のCanvasで画像を描画する方法【drawImage()の使い方を解説】

    HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックスやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、ブラウザ上で動的なビジュアル表現を実現できます。 HTML5キャンバスで画像を扱うには、drawImage()メソッドを使用します。このメソッドは、指定した画像をキャンバス上にそのまま描画します。 drawImage()メソッドの基本構文と引数 drawImage()メソッドの基本的な呼び出し形式は次の通りです。 ctx.drawImage(img, x, y); 各引数の意味は以下の通りです。 img：