HTML5 Canvas动画设计解析

       我们使用JavaScript操控canvas元素可以很容易做出可互动的动画。但是当初canvas元素并不是为此而设计的（与Flash不同），因此存在一些限制。

        其中最大的限制就是Canvas元素中的图形一经绘制就不会改变，除非你要人为改变它。如果我们需要改变Canvas元素中绘制的图形，我们就必须先重绘相应的图形。重绘复杂的图形会花费掉很多的时间，因此动画效果也将受限于电脑的速度。

实现动画的原理

1、重绘canvas

除非你会画一些能够填满整个canvas的图形（例如背景图），否则你有必要**先前绘制的所有图形。而最简单的方法是使用clearRect方法。

2、保存canvas状态

如果你更动了任何一个会影响到canvas状态的设定（样式、变形等等），并且希望能够确保每一次绘制画格时都是原本的状态，你就需要保存canvas状态。

3、绘制移动中的图形

在这一步骤里才真正画出需要移动的图形。

4、读取canvas状态

如果你先前保存过Canvas的状态，就先在画新的图形之前读取之前的状态。

动画的操控

图形是以直接使用canvas方法或调用自订的函数所绘制的。在正常情况下，当JavaScript执行完成时，我们就能看见呈现在canvas上的结果。

我们需要一个方法，能在一段时间内循环执行我们的绘图函数。有两个方法可操控这样的动画。首先，这里有setInterval和setTimeout函数，可用来在指定的时间内调用特定的函数。

1. setInterval(animateShape,500);
   
2. setTimeout(animateShape,500);

复制代码

如果你不需要和用户互动，就最好使用setInterval函数，他会重复执行预先准备好的代码。在上面的例子里，animateShape函数是每500毫秒（一秒的一半）执行一次。setTimeout函数只会在设定好的时间点上执行一次。
第二个方法是我们可以利用用户的输入来操控。如果我们想要制作游戏，我们可以使用键盘或滑鼠的事件来操控动画。只需设定事件接收器（eventListener），我们就能捕捉任何的使用者动作，并执行我们的动画函数。
动画范例
在这个范例中，我们使用setInterval函数来操控动画，使小型的太阳系模拟系统动起来。

1. var sun = new Image();
   
2. var moon = new Image();
   
3. var earth = new Image();
   
4. function init(){
   
5.   sun.src = 'images/sun.png';
   
6.   moon.src = 'images/moon.png';
   
7.   earth.src = 'images/earth.png';
   
8.   setInterval(draw,100);
   
9. }
   
10. 
    
11. function draw() {
    
12.   var ctx = document.getElementById('canvas').getContext('2d');
    
13. 
    
14.   ctx.globalCom**iteOperation = 'destination-over';
    
15.   ctx.clearRect(0,0,300,300); // **canvas
    
16. 
    
17.   ctx.fillStyle = 'rgba(0,0,0,0.4)';
    
18.   ctx.strokeStyle = 'rgba(0,153,255,0.4)';
    
19.   ctx.save();
    
20.   ctx.translate(150,150);
    
21. 
    
22.   // 地球
    
23.   var time = new Date();
    
24.   ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() +
    
25.                       ((2*Math.PI)/60000)*time.getMilliseconds() );
    
26.   ctx.translate(105,0);
    
27.   ctx.fillRect(0,-12,50,24); // 阴影
    
28.   ctx.drawImage(earth,-12,-12);
    
29. 
    
30.   // 月球
    
31.   ctx.save();
    
32.   ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() +
    
33.                           ((2*Math.PI)/6000)*time.getMilliseconds() );
    
34.   ctx.translate(0,28.5);
    
35.   ctx.drawImage(moon,-3.5,-3.5);
    
36.   ctx.restore();
    
37. 
    
38.   ctx.restore();
    
39.   
    
40.   ctx.beginPath();
    
41.   ctx.arc(150,150,105,0,Math.PI*2,false); // 地球轨道
    
42.   ctx.stroke();
    
43. 
    
44.   ctx.drawImage(sun,0,0,300,300);
    
45. }

复制代码

引用MOZILLA DEVELOPER NETWORK


转自houoop

【HTML5 Canvas动画设计解析】相关文章

1. HTML5 Canvas动画设计解析

2. CSS动画集合 可直接生成动画代码 – AniCollection

3. Animo.js：强大的CSS动画管理工具

4. Opera 11.60最新Beta发布,全新采用HTML5解析算法

5. 解析Facebook的HTML5移动平台战略

6. 解析关于HTML5的认知误区及其未来潜力

7. 谷歌开源Gumbo：纯C语言实现的HTML5解析库

8. HTML5每日一练之Canvas标签的应用-在页面上放置Canvas

9. jsdom 4.0 发布，JavaScript 的 HTML 解析器

10. Java开源的HTML 解析器，jsoup 1.8.2 发布

本文来源：https://www.51html5.com/a633.html