HTML5 绘制动画

绘制动画

虽然canvas的API并未直接提供支持动画的方法，但就其本身而言，在canvas中实现动画效果也很简单：只需要持续的更新并重绘画布就行了。这种持续的更新并重绘就叫做动画循环，它是所有动画的核心逻辑。

在canvas中实现动画，首先需要初始化画布上的对象。然后，启动一个动画循环来更新画布、清除画布、重绘画布，再请求下一个新的动画帧。Canvas动画的基本原理如图 4‑36 所示：

图4-36 canvas动画的基本原理

接下来通过一个简单实例，来看看canvas动画的实现过程。该实例以动画的方式，实现一个旋转的八卦图。代码如下：

1. function clear() {  
2.    context.clearRect(0, 0, canvas.width, canvas.height);
3. }
5. function rotate() {
6.    context.rotate(Math.PI/30);  // 每分钟旋转一周
7. }
9. function draw () {
10.     // 绘制白色半圆
11.    context.beginPath();
12.    context.arc(0, 0, 80, 1.5*Math.PI, Math.PI/2, false);
13.    context.fillStyle = "white";
14.    context.closePath();
15.    context.fill();
16.            
17.    // 绘制黑色半圆
18.    context.beginPath();
19.    context.arc(0, 0, 80, Math.PI/2, 1.5*Math.PI, false);
20.    context.fillStyle = "black";
21.    context.closePath();
22.    context.fill();
23.            
24.     // 绘制黑色小圆
25.     context.beginPath();
26.     context.arc(0, 40, 40, 0, Math.PI*2, true);
27.     context.fillStyle = "black";
28.     context.closePath();
29.     context.fill();
30.            
31.     // 绘制白色小圆
32.     context.beginPath();
33.     context.arc(0, -40, 40, 0, Math.PI*2, true);
34.     context.fillStyle = "white";
35.     context.closePath();
36.     context.fill();
37.            
38.     // 绘制白色小圆心
39.     context.beginPath();
40.     context.arc(0, -40, 5, 0, Math.PI*2, true);
41.     context.fillStyle = "black";
42.     context.closePath();
43.     context.fill();
44.            
45.     // 绘制黑色小圆心
46.     context.beginPath();
47.     context.arc(0, 40, 5, 0, Math.PI*2, true);
48.     context.fillStyle = "white";
49.     context.closePath();
50.     context.fill();
51. }
53. function drawStage() {
54.      rotate();  // 更新
55.      clear();   // 清除
56.      draw();    // 重绘
57. }
59. window.onload = function(){
60.     canvas = document.getElementById('canvas');
61.     context = canvas.getContext('2d');
62.           
63.     context.translate(canvas.width/2, canvas.height/2);
64.           
65.     setInterval(drawStage, 100);
66. };

上述代码，当页面加载完成后，首先进行初始化，然后调用setInterval(drawStage, 100)方法启动动画循环，在动画循环中，每隔100ms会调用一次drawStage ()函数，来执行更新画布、清除画布、重绘画布的操作，以实现动画效果。运行结果如图 4‑37 所示：

图4-37 旋转的八卦图

当然，这里只是为了演示实现动画的原理而已，所以实例相对简单。其实，Canvas中的动画可以很简单，也可以很复杂。不管简单还是复杂，其基本原理是完全相同的。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

版权声明：本文出自 歪脖网 的《HTML宝典》，欢迎在线阅读，并提出宝贵意见。