下面是用HTML5的<canvas>标签写的一个视差滚动动画的示例。采用了制作动画或者游戏编程中常用的双缓冲技术：获取到页面中的Canvas对象之后，创建了一个与页面Canvas同样大小的Canvas对象。绘图时先将图像绘制到缓冲Canvas中，等到每一桢的图像绘制完全后在把整个缓冲Canvas绘制到页面Canvas中。前景、中景、远景的视差通过控制移动速度来实现。整个动画的绘制部分只使用了Context对象的drawImage()方法。

HTML code：

 

[html] view plaincopy
 
  1. <canvas id="canvas" width="600" height="400">  
  2.     <p>Your browser does not support the canvas element</p>  
  3. </canvas>  


JavaScript code：

 

 

[javascript] view plaincopy
 
  1. const FPS = 30;  
  2. const SECONDS_BETWEEN_FRAMES = 1 / FPS;  
  3.   
  4. var bg0 = new Image();  
  5. var bg1 = new Image();  
  6. var bg2 = new Image();  
  7.   
  8. var x = 0;  
  9. const RATE = 50 * SECONDS_BETWEEN_FRAMES;  
  10. const WIDTH = 600;  
  11. const HEIGHT = 320;  
  12.   
  13. var canvas;  
  14. var canvasBuffer;  
  15. var context;  
  16. var contextBuffer;  
  17.   
  18. window.onload = init;  
  19.   
  20. function init() {  
  21.     bg0.src = "b0.png";  
  22.     bg1.src = "b1.png";  
  23.     bg2.src = "b2.png";  
  24.       
  25.     canvas = document.getElementById("canvas");  
  26.     canvasBuffer = document.createElement("canvas");  
  27.     canvasBuffer.width = canvas.width;  
  28.     canvasBuffer.height = canvas.height;  
  29.     context = canvas.getContext("2d");  
  30.     contextBuffer = canvasBuffer.getContext("2d");  
  31.     context.clearRect(0, 0, canvas.width, canvas.height)  
  32.     contextBuffer.clearRect(0, 0, canvasBuffer.width, canvasBuffer.height);  
  33.       
  34.     setInterval(animation, SECONDS_BETWEEN_FRAMES);  
  35. }  
  36.   
  37. function animation() {  
  38.     x += RATE;  
  39.       
  40.     context.clearRect(0, 0, canvas.width, canvas.height)  
  41.     contextBuffer.clearRect(0, 0, canvasBuffer.width, canvasBuffer.height);  
  42.       
  43.     drawBuffer(bg0, 0, 0, 0.5);  
  44.     drawBuffer(bg1, 0, 100, 0.75);  
  45.     drawBuffer(bg2, 0, 100, 1);  
  46.       
  47.     context.drawImage(canvasBuffer, 0, 0);  
  48. }  
  49.   
  50. function drawBuffer(image, dx, dy, factor) {  
  51.     var left = (x * factor) % image.width;  
  52.     if (left + WIDTH >= image.width) {  
  53.         var d0 = image.width - left;  
  54.         var d1 = WIDTH - d0;  
  55.         contextBuffer.drawImage(image, left, 0, d0, HEIGHT, dx, dy, d0, HEIGHT);  
  56.         contextBuffer.drawImage(image, 0, 0, d1, HEIGHT, dx + d0, dy, d1, HEIGHT);  
  57.     }  
  58.     else {  
  59.         contextBuffer.drawImage(image, left, 0, WIDTH, HEIGHT, dx, dy, WIDTH, HEIGHT);  
  60.     }  
  61. }  


其中的setInternal()方法是动画动起来的核心方法。其原型如下：

 

int setInternal(code, millisec[, lang]);

其中code表示需要循环执行的代码或者方法（名），必需；millisec表示周期性循环的周期，单位是毫秒，必需；lang表示脚本语言的类型，如JScript、VBScript、JavaScript，可选，不过一般都直接忽略。返回值为一个可以传递给clearInternal()方法的值，从而取消循环。

setInternal()方法是HTML DOM的一个内建方法，其作用是按照指定的周期循环调用某一段代码或者某个方法，直到窗口关闭或者调用clearInternal()方法结束循环。

顺带一提的是在Canvas画布中绘制图形，一般情况下后绘制的会覆盖先绘制的，所以在绘制图像的时候需要先绘制远景b0，再绘制中景b1，最后绘制近景b2。

 

转自：http://www.html5china.com/HTML5features/canvas/20111207_3183.html