HTML5 Canvas动画模板

最新推荐文章于 2024-09-26 19:50:48 发布

原创最新推荐文章于 2024-09-26 19:50:48 发布 · 663 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #html #canvas #ViewUI

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

32 篇文章

订阅专栏

javascript

28 篇文章

订阅专栏

解题小技巧

11 篇文章

订阅专栏

本文介绍了如何使用requestAnimFrame()方法在HTML5中创建动画，通过更新画布上的元素来实现平滑的动画效果。

部署运行你感兴趣的模型镜像

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