原文： https://zetcode.com/gfx/html5canvas/animation/

在本章中，我们将在 HTML5 canvas中创建动画。

动画是连续的图像，使人产生了运动的幻觉。 但是，动画不仅限于运动。 随时间改变对象的背景也被视为动画。

在 HTML5 canvas中创建动画的函数有以下三个：

  • setInterval(function, delay)
  • setTimeut(function, delay)
  • requestAnimationFrame(callback)

setInterval()函数每隔延迟毫秒重复执行一次传递的函数。 setTimeout()以毫秒为单位执行指定的功能。 为了创建动画，从执行的函数中调用setTimeout()。 requestAnimationFrame()函数允许浏览器在下一次重绘之前调用指定的函数来更新动画。 浏览器进行了一些优化。

沿曲线移动

在第一个动画中，对象沿曲线移动。

move_along_curve.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas move along curve</title>
  5. <style>
  6.     canvas { border: 1px solid #bbbbbb }
  7. </style>
  8. <script>
  9.     var canvas;
  10.     var ctx;
  11.     var x = 20; 
  12.     var y = 80;
  13.     const DELAY = 30;
  14.     const RADIUS = 10;
  16.     function init() {
  18.         canvas = document.getElementById('myCanvas');
  19.         ctx = canvas.getContext('2d');
  21.         setInterval(move_ball, DELAY);
  22.     }
  24.     function draw() {        
  26.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  27.         ctx.beginPath();
  28.         ctx.fillStyle = "cadetblue";
  29.         ctx.arc(x, y, RADIUS, 0, 2*Math.PI);
  30.         ctx.fill();
  31.     }
  33.     function move_ball() {
  35.         x += 1;
  37.         if (x > canvas.width + RADIUS) {
  38.             x = 0;
  39.         }
  41.         y = Math.sin(x/32)*30 + 80;
  42.         draw();
  43.     } 
  44. </script>
  45. </head>
  47. <body onload="init();">
  48.     <canvas id="myCanvas" width="350" height="150">
  49.     </canvas>
  50. </body>
  51. </html>

该示例沿正弦曲线移动一个圆。 圆圈移过画布的末端后，它再次出现在左侧。

  1. setInterval(move_ball, DELAY);

setInterval()函数使move_ball()函数每DELAY ms 调用一次。

  1. function draw() {        
  3.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  4.     ctx.beginPath();
  5.     ctx.fillStyle = "cadetblue";
  6.     ctx.arc(x, y, RADIUS, 0, 2*Math.PI);
  7.     ctx.fill();
  8. }

draw()方法使用clearRect()方法清除画布，并绘制具有更新的 x 和 y 坐标的新圆。

  1. function move_ball() {
  3.     x += 1;
  5.     if (x > canvas.width + RADIUS) {
  6.         x = 0;
  7.     }
  9.     y = Math.sin(x/32)*30 + 80;
  10.     draw();
  11. }

在move_ball()函数中，我们更新圆心的 x 和 y 坐标。 我们检查球是否已通过画布的右边缘，然后调用draw()方法重绘画布。

淡出

淡出是改变对象状态的动画。 这是一种过渡动画。

fading_out.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.     canvas {border: 1px solid #bbbbbb}
  6. </style>
  7. <title>HTML5 canvas fading out</title>
  8. <script>
  9.     var canvas;
  10.     var ctx;
  12.     var alpha = 1;
  14.     var rx = 20;
  15.     var ry = 20;
  16.     var rw = 120;
  17.     var rh = 80;
  19.     const DELAY = 20;
  21.     function init() {
  23.         canvas = document.getElementById('myCanvas');
  24.         ctx = canvas.getContext('2d');
  26.         canvas.addEventListener("click", onClicked);
  28.         ctx.fillRect(rx, ry, rw, rh)
  29.     }
  31.     function onClicked(e) {
  32.         var cx = e.x;
  33.         var cy = e.y;
  35.         if (cx >= rx && cx <= rx + rw && 
  36.             cy >= ry && cy <= ry + rh) {
  37.             fadeout();
  38.         }
  39.     }
  41.     function fadeout() {
  43.         if (alpha < 0) {
  44.             canvas.removeEventListener("click", onClicked);
  45.             ctx.globalAlpha = 1;
  46.             ctx.fillStyle = 'white';
  47.             ctx.fillRect(rx, ry, rw, rh);
  48.             return;
  49.         }         
  51.         ctx.clearRect(rx, ry, rw, rh);
  52.         ctx.globalAlpha = alpha;
  53.         ctx.fillRect(rx, ry, rw, rh)
  55.         alpha -= 0.01;
  57.         setTimeout(fadeout, DELAY);
  58.     }
  60. </script>
  61. </head>
  63. <body onload="init();">
  64.     <canvas id="myCanvas" width="350" height="250">
  65.     </canvas>
  66. </body>
  67. </html>

有一个矩形对象。 当我们单击矩形时，它开始淡出。

  1. canvas.addEventListener("click", onClicked);

通过addEventListener()方法将click监听器添加到画布。 再次单击鼠标后，将调用onClicked()函数。

  1. ctx.fillRect(rx, ry, rw, rh)

最初，在画布上以默认的黑色填充绘制了一个矩形。

  1. function onClicked(e) {
  2.     var cx = e.x;
  3.     var cy = e.y;
  5.     if (cx >= rx && cx <= rx + rw && 
  6.         cy >= ry && cy <= ry + rh) {
  7.         fadeout();
  8.     }
  9. }

在onClicked()函数内，我们可以计算出鼠标单击的 x 和 y 坐标。 我们将鼠标坐标与矩形的外部边界进行比较，如果鼠标坐标落在矩形的区域内，则将调用fadeout()方法。

  1. if (alpha < 0) {
  2.     canvas.removeEventListener("click", onClicked);
  3.     ctx.globalAlpha = 1;
  4.     ctx.fillStyle = 'white';
  5.     ctx.fillRect(rx, ry, rw, rh);
  6.     return;
  7. }

当矩形完全透明时，我们将移走监听器并以不透明的白色填充该区域。 return语句结束fadeout()函数的递归调用。

  1. ctx.clearRect(rx, ry, rw, rh);
  2. ctx.globalAlpha = alpha;
  3. ctx.fillRect(rx, ry, rw, rh)

矩形的区域被清除并填充有更新的 alpha 状态。

  1. alpha -= 0.01;

alpha值减小一小部分。

  1. setTimeout(fadeout, DELAY);

在DELAY ms 之后，从其内部调用fadeout()方法。 这种做法称为递归。

泡泡

以下示例受到 Java 2D 演示示例的启发。

bubbles.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas bubbles</title>
  5. <style>
  6.     canvas {
  7.         border: 1px solid #bbb;
  8.         background: #000;
  9.     }
  10. </style>
  11. <script>
  12.     var cols = ["blue", "cadetblue", "green", "orange", "red", "yellow",
  13.         "gray", "white"];
  15.     const NUMBER_OF_CIRCLES = 35;
  16.     const DELAY = 30;
  18.     var maxSize;
  19.     var canvas;
  20.     var ctx;
  21.     var circles;
  23.     function Circle(x, y, r, c) {
  24.         this.x = x;
  25.         this.y = y;
  26.         this.r = r;
  27.         this.c = c;
  28.     } 
  30.     function init() {
  32.         canvas = document.getElementById('myCanvas');
  33.         ctx = canvas.getContext('2d');
  35.         circles = new Array(NUMBER_OF_CIRCLES);
  37.         initCircles();
  38.         doStep();
  39.     }
  41.     function initCircles() {
  43.         var w = canvas.width;
  44.         var h = canvas.height;
  46.         maxSize = w / 10; 
  48.         for (var i = 0; i < circles.length; i++) {
  50.             var rc = getRandomCoordinates();
  51.             var r = Math.floor(maxSize * Math.random());   
  52.             var c = cols[Math.floor(Math.random()*cols.length)]
  54.             circles[i] = new Circle(rc[0], rc[1], r, c);
  55.         }
  56.     }        
  58.     function doStep() {
  60.         for (var i = 0; i < circles.length; i++) {
  62.             var c = circles[i];
  63.             c.r += 1;
  65.             if (c.r > maxSize) {
  67.                 var rc = getRandomCoordinates();
  68.                 c.x = rc[0];
  69.                 c.y = rc[1];
  70.                 c.r = 1;
  71.             } 
  72.         }
  74.         drawCircles();
  75.         setTimeout(doStep, DELAY);
  76.     }
  78.     function getRandomCoordinates() {
  80.         var w = canvas.width;
  81.         var h = canvas.height;
  83.         var x = Math.floor(Math.random() * (w - (maxSize / 2)));
  84.         var y = Math.floor(Math.random() * (h - (maxSize / 2)));
  86.         return [x, y];
  87.     }
  89.     function drawCircles() {
  91.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  93.         for (var i = 0; i < circles.length; i++) {
  95.             ctx.beginPath();
  96.             ctx.lineWidth = 2.5;
  98.             var c = circles[i];
  99.             ctx.strokeStyle = c.c;
  100.             ctx.arc(c.x, c.y, c.r, 0, 2*Math.PI);
  101.             ctx.stroke();
  102.         }
  103.     }
  104. </script>
  105. </head>
  107. <body onload="init();">
  108.     <canvas id="myCanvas" width="350" height="250">
  109.     </canvas>
  110. </body>
  111. </html>

在该示例中，有越来越多的彩色气泡在屏幕上随机出现和消失。

  1. var cols = ["blue", "cadetblue", "green", "orange", "red", "yellow",
  2.     "gray", "white"];

这些颜色用于绘制气泡。

  1. function Circle(x, y, r, c) {
  2.     this.x = x;
  3.     this.y = y;
  4.     this.r = r;
  5.     this.c = c;
  6. }

这是Circle对象的构造器。 除了 x 和 y 坐标以及半径之外，它还包含颜色值的属性。

  1. circles = new Array(NUMBER_OF_CIRCLES);

circles数组用于容纳圆形对象。

  1. for (var i = 0; i < circles.length; i++) {
  3.     var rc = getRandomCoordinates();
  4.     var r = Math.floor(maxSize * Math.random());   
  5.     var c = cols[Math.floor(Math.random()*cols.length)]
  7.     circles[i] = new Circle(rc[0], rc[1], r, c);
  8. }

circles数组用圆圈填充。 我们计算随机坐标，随机初始半径和随机颜色值。

  1. function doStep() {

doStep()表示程序的动画周期。

  1. for (var i = 0; i < circles.length; i++) {
  3.     var c = circles[i];
  4.     c.r += 1;
  6.     if (c.r > maxSize) {
  8.         var rc = getRandomCoordinates();
  9.         c.x = rc[0];
  10.         c.y = rc[1];
  11.         c.r = 1;
  12.     } 
  13. }

我们遍历circles数组并增加每个圆的半径。 当圆达到最大大小时，它会随机重新定位并最小化。

  1. setTimeout(doStep, DELAY);

setTimeout()方法用于创建动画。 您可能需要调整DELAY值以适合您的硬件。

  1. function drawCircles() {
  3.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  5.     for (var i = 0; i < circles.length; i++) {
  7.         ctx.beginPath();
  8.         ctx.lineWidth = 2.5;
  10.         var c = circles[i];
  11.         ctx.strokeStyle = c.c;
  12.         ctx.arc(c.x, c.y, c.r, 0, 2*Math.PI);
  13.         ctx.stroke();
  14.     }
  15. }

drawCircles()函数清除画布并绘制数组中的所有圆圈。

星空

下面的示例创建一个星空动画。

starfield.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 canvas star field</title>
  5. <script>
  6. var canvas_w;
  7. var canvas_h;
  8. var canvas;
  9. var ctx;
  10. var layer1;
  11. var layer2;
  12. var layer3;
  14. const DELAY = 20;
  15. const N_STARS = 60;
  16. const SPEED1 = 3;
  17. const SPEED2 = 2;
  18. const SPEED3 = 1;
  20. function init() {
  22.     canvas = document.getElementById("myCanvas");
  23.     ctx = canvas.getContext("2d");
  25.     canvas_w = canvas.width;
  26.     canvas_h = canvas.height;
  28.     layer1 = new layer(N_STARS, SPEED1, "#ffffff");
  29.     layer2 = new layer(N_STARS, SPEED2, "#dddddd");
  30.     layer3 = new layer(N_STARS, SPEED3, "#999999");
  32.     setTimeout("drawLayers()", DELAY);
  33. }
  35. function star() {
  37.     this.x = Math.floor(Math.random()*canvas_w);
  38.     this.y = Math.floor(Math.random()*canvas_h);
  40.     this.move = function(speed) {
  42.         this.y = this.y + speed;
  44.         if (this.y > canvas_h) { 
  46.             this.y = 0;
  47.             this.x = Math.floor(Math.random()*canvas_w);
  48.         }
  49.     }
  51.     this.draw = function(col) {
  53.         ctx.fillStyle = col;
  54.         ctx.fillRect(this.x, this.y , 1, 1);
  55.     }
  56. }
  58. function layer(n, sp, col) {
  60.     this.n = n;
  61.     this.sp = sp;
  62.     this.col = col;
  63.     this.stars = new Array(this.n);
  65.     for (var i=0; i < this.n; i++) {
  66.         this.stars[i] = new star();
  67.     }
  69.     this.moveLayer = function() {
  71.         for (var i=0; i < this.n; i++) {
  72.             this.stars[i].move(this.sp);
  73.         }
  74.     }
  76.     this.drawLayer = function() {
  78.         for (var i=0; i < this.n; i++) {
  79.             this.stars[i].draw(this.col);
  80.         }
  81.     }
  82. }
  84. function drawLayers() {
  86.     ctx.fillStyle = '#000000';      
  87.     ctx.fillRect(0, 0, canvas_w, canvas_h);
  89.     layer1.moveLayer();
  90.     layer2.moveLayer();
  91.     layer3.moveLayer();
  93.     layer1.drawLayer();
  94.     layer2.drawLayer();
  95.     layer3.drawLayer();
  97.     setTimeout("drawLayers()", DELAY);
  98. }
  100. </script>
  101. </head>
  103. <body onload="init();">
  104.     <canvas id="myCanvas" width="800" height="600">
  105.     </canvas>
  106. </body>
  107. </html>

通过产生三个不同的图层来创建星空动画。 每层由具有不同速度和颜色阴影的星星（小点）组成。 前层的星星更亮，移动速度更快，背面的星星更暗，移动速度更慢。

  1. layer1 = new layer(N_STARS, SPEED1, "#ffffff");
  2. layer2 = new layer(N_STARS, SPEED2, "#dddddd");
  3. layer3 = new layer(N_STARS, SPEED3, "#999999");

创建了三层星星。 它们具有不同的速度和颜色阴影。

  1. function star() {
  3.     this.x = Math.floor(Math.random()*canvas_w);
  4.     this.y = Math.floor(Math.random()*canvas_h);
  5. ...

创建星后，它会被赋予随机坐标。

  1. this.move = function(speed) {
  3.     this.y = this.y + speed;
  5.     if (this.y > canvas_h) { 
  7.         this.y = 0;
  8.         this.x = Math.floor(Math.random()*canvas_w);
  9.     }
  10. }

move()方法移动星星； 它增加了它的 y 坐标。

  1. this.draw = function(col) {
  3.     ctx.fillStyle = col;
  4.     ctx.fillRect(this.x, this.y , 1, 1);
  5. }

draw()方法在画布上绘制星星。 它使用fillRect()方法以给定的颜色绘制一个小矩形。

  1. function layer(n, sp, col) {
  3.     this.n = n;
  4.     this.sp = sp;
  5.     this.col = col;
  6.     this.stars = new Array(this.n);
  7. ...

一层是具有给定速度和颜色阴影的n星的集合。 星星存储在stars数组中。

  1. for (var i=0; i < this.n; i++) {
  2.     this.stars[i] = new star();
  3. }

创建图层后，stars数组将填充星形对象。

  1. this.moveLayer = function() {
  3.     for (var i=0; i < this.n; i++) {
  4.         this.stars[i].move(this.sp);
  5.     }
  6. }

moveLayer()方法遍历星星数组，并调用每个星星的move()方法。

  1. this.drawLayer = function() {
  3.     for (var i=0; i < this.n; i++) {
  4.         this.stars[i].draw(this.col);
  5.     }
  6. }

同样，drawLayer()方法调用每个星星的draw()方法。

  1. function drawLayers() {
  3.     ctx.fillStyle = '#000000';      
  4.     ctx.fillRect(0, 0, canvas_w, canvas_h);
  6.     layer1.moveLayer();
  7.     layer2.moveLayer();
  8.     layer3.moveLayer();
  10.     layer1.drawLayer();
  11.     layer2.drawLayer();
  12.     layer3.drawLayer();
  14.     setTimeout("drawLayers()", DELAY);
  15. }

drawLayers()函数可移动每一层的星星并将其绘制在画布上。 它在DELAY ms 之后调用自己，从而创建动画。

在 HTML5 画布教程的这一章中，我们介绍了动画。