HTML5 Canvas-アニメーション

HTML5キャンバスは、画像を描画して完全に消去するために必要なメソッドを提供します。 Javascriptのヘルプを利用して、HTML5キャンバス上で適切なアニメーションをシミュレートできます。

以下は、キャンバス上の画像をアニメーション化するために使用される2つの重要なJavaScriptメソッドです-

Sr.No.

Method and Description

1

setInterval(callback, time);

このメソッドは、指定されたtimemillisecondsの後に、指定されたコードを繰り返し実行します。

2

setTimeout(callback, time);

このメソッドは、指定された_time_ミリ秒後に一度だけ指定されたコードを実行します。

例

以下は、小さな画像を繰り返し回転させる簡単な例です-

<!DOCTYPE HTML>

<html>
   <head>

      <script type = "text/javascript">
         var pattern = new Image();

         function animate() {
            pattern.src = '/html5/images/pattern.jpg';
            setInterval(drawShape, 100);
         }

         function drawShape() {

           //get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');

           //Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {

              //use getContext to use the canvas for drawing
               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('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>

   <body onload = "animate();">
      <canvas id = "mycanvas" width = "400" height = "400"></canvas>
   </body>

</html>

上記の例では、次の結果が生成されます-

Html5-canvas-animation

HTML5 Canvas-アニメーション

例