当前位置:首页 > 开发 > Web前端 > Html5 > 正文

HTML5 Canvas动画模板

发表于: 2014-05-21   作者:128kj   来源:转载   浏览:
摘要:    创建HTML5的画布动画,我们可以使用requestAnimFrame()方法使浏览器以确定最佳的FPS为我们更新动画。对于每一个动画帧,我们可以更新在画布上的元素,清除画布,重新绘制的画布,然后请求另一个动画帧。 下面是一个简单的框架,备用。 <!DOCTYPE HTML> <html>   <head> &
   创建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动画模板

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
在网上发现一个java眨眼睛动画,把代码改成了HTML5 +JS,效果如下: 动画中有一些明显不足之处,请会
原理:   1.canvas通过clip()指定对应的区域为可用区域,在区域外的部分不受影响,每次刷新可见
点这里可以看动画效果: http://www.108js.com/article/article3/zip1/text.html 效果图: 代码: <
■概要  ・HTML5のCanvasタグを使って回転しているボールを描くサンプルである。 ■要点  ・setIn
今日Google首页:铯元素的发现者 - 化学家罗伯特·本生 200 周年诞辰,利用HTML5 Canvas和静态图片实
一个简单的动画:两个点在两个圆上运动。页面中有两个canvas,有一个背景设置为透明。 欢迎访问博主的
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw
今日Google首页:铯元素的发现者 - 化学家罗伯特·本生 200 周年诞辰,利用HTML5 Canvas和静态图片实
效果图: 效果链接: http://www.108js.com/article/canvas/9/demo.html 代码: <!DOCTYPE HTML&g
两张精灵表图片: 这里可以看效果: http://www.108js.com/article/article3/view/30161/an.html <
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号