HTML5 Canvas动画模板

最新推荐文章于 2024-08-16 12:52:43 发布

iteye_8466

最新推荐文章于 2024-08-16 12:52:43 发布

阅读量600

点赞数

分类专栏： javascript HTML5 动画游戏解题小技巧文章标签： html5 javascript html canvas ViewUI

本文链接：https://blog.csdn.net/iteye_8466/article/details/82580181

版权

HTML5 动画游戏同时被 3 个专栏收录

32 篇文章 1 订阅

订阅专栏

javascript

28 篇文章 0 订阅

订阅专栏

解题小技巧

11 篇文章 0 订阅

订阅专栏

创建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();