HTML5 Canvas动画模板

128kj

浏览: 601176 次
来自: ...

最近访客更多访客>>

hcmfys

caizi12

sdtvyyb_007

hanqunfeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html5 javascript html canvas

   创建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中的坐标 | HTML5 Canvas 圆弧动画（绕四周运动）

2014-05-21 10:59
浏览 1072
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 Canvas动画模板

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 Canvas动画模板

评论

发表评论

相关推荐

HTML5 Canvas 旋转的“金字塔”

HTML5 canvas 飘扬的五星红旗

简单HTML5 Canvas Arrow旋转动画

HTML5 Canvas简单透明文字动画

一个非常好的HTML5 Canvas焰火效果

《HTML5 Canvas学习笔记(10)》数钱数到手抽筋

HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）

HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）

HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）

HTML5 Canvas学习笔记(6)拼图游戏（数字版）

HTML5 Canvas学习笔记(5)游戏得分动画

HTML5 Canvas学习笔记(4)游戏界面的淡入淡出

HTML5 Canvas学习笔记(3)加载游戏/动画音乐

HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体

HTML5 Canvas学习笔记(1)处理鼠标事件

javaScript 广度优先搜索法"自动推箱子"（二）

javaScript 广度优先搜索法"自动推箱子"（一）

HTML5 Canvas简单淡入淡出游戏启动界面

HTML5 Canvas贝塞尔曲线动画

javascript for语句最佳实践

最近访客更多访客>>