`
128kj
  • 浏览: 583797 次
  • 来自: ...
社区版块
存档分类
最新评论

HTML5 Canvas动画模板

html5javascripthtmlcanvas 
阅读更多
   创建HTML5的画布动画，我们可以使用requestAnimFrame()方法使浏览器以确定最佳的FPS为我们更新动画。对于每一个动画帧，我们可以更新在画布上的元素，清除画布，重新绘制的画布，然后请求另一个动画帧。

下面是一个简单的框架，备用。
<!DOCTYPE HTML>
<html>
  <head>
   <style>
    body {
     margin: 0px;
     padding: 0px;
    }
   </style>
</head>
<body>
   <canvas id="myCanvas" width="578" height="200">你的浏览器不支持HTML5 Canvas</canvas>
   <script> 
window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || 
	 window.webkitRequestAnimationFrame || 
	    window.mozRequestAnimationFrame || 
		  window.oRequestAnimationFrame || 
		 window.msRequestAnimationFrame ||
           function(callback) {
             window.setTimeout(callback, 1000 / 60);
           };
      })();
   function animate() {
     var canvas = document.getElementById('myCanvas');
     var context = canvas.getContext('2d');
     // update
     // clear
     context.clearRect(0, 0, canvas.width, canvas.height);
     // draw stuff
     // request new frame
     requestAnimFrame(function() {
        animate();
     });
   }
   animate();

</script>
</body>
</html>
分享到：
| HTML5 Canvas 圆弧动画（绕四周运动）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics