HTML5 Canvas – 动画

HTML5画布提供了必要的方法来绘制图像并完全擦除它。我们可以使用Javascript在HTML5画布上模拟良好的动画。

以下是用于在画布上动画化图像的两个重要的Javascript方法 −

Sr.No.	方法和描述
1	setInterval(callback, time); 该方法在给定的时间毫秒后重复执行提供的代码。
2	setTimeout(callback, 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() {

            // 使用DOM获取画布元素
            var canvas = document.getElementById('mycanvas');

            // 确保在不支持画布时不执行
            if (canvas.getContext) {

               // 使用getContext用于绘图
               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>

以上示例将产生以下结果 −

HTML5 Canvas - 动画