HTML5 Canvas双缓存实例

CshBBrain

浏览: 649991 次
性别:
来自: 成都

最近访客更多访客>>

kristy_yy

hb_wxd

gugnv

a524274865

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 开源WebSocket服务...
浏览量：144888

: HTML5移动开发
浏览量：137826

文章分类

社区版块

存档分类

转自：http://www.108js.com/article/article3/30046.html?id=255

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

<html>
<body>
  <canvas id="canvas" width="600" height="400">
   <p>Your browser does not support the canvas element</p>
  </canvas>
</body>
<script>

const FPS = 30;  
 const SECONDS_BETWEEN_FRAMES = 1 / FPS;  
  
 var bg0 = new Image();  
 var bg1 = new Image();  
 var bg2 = new Image();  
  
 var x = 0;  
 const RATE = 50 * SECONDS_BETWEEN_FRAMES;  
 const WIDTH = 600;  
 const HEIGHT = 320;  
  
 var canvas;  
 var canvasBuffer;  
 var context;  
 var contextBuffer;  
  
 window.onload = init;  
  
 function init() {  
    bg0.src = "b0.png";  
    bg1.src = "b1.png";  
    bg2.src = "b2.png";  
      
    canvas = document.getElementById("canvas");  
    canvasBuffer = document.createElement("canvas");  
    canvasBuffer.width = canvas.width;  
    canvasBuffer.height = canvas.height;  
    context = canvas.getContext("2d");  
    contextBuffer = canvasBuffer.getContext("2d");  
    context.clearRect(0, 0, canvas.width, canvas.height)  
    contextBuffer.clearRect(0, 0, canvasBuffer.width, canvasBuffer.height);  
      
    setInterval(animation, SECONDS_BETWEEN_FRAMES);  
}  
  
function animation() {  
    x += RATE;  
      
    context.clearRect(0, 0, canvas.width, canvas.height)  
    contextBuffer.clearRect(0, 0, canvasBuffer.width, canvasBuffer.height);  
      
    drawBuffer(bg0, 0, 0, 0.5);  
    drawBuffer(bg1, 0, 100, 0.75);  
    drawBuffer(bg2, 0, 100, 1);  
    context.drawImage(canvasBuffer, 0, 0);  
}  
  
function drawBuffer(image, dx, dy, factor) {  
    var left = (x * factor) % image.width;  
    if (left + WIDTH >= image.width) {  
        var d0 = image.width - left;  
        var d1 = WIDTH - d0;  
        contextBuffer.drawImage(image, left, 0, d0, HEIGHT, dx, dy, d0, HEIGHT);  
        contextBuffer.drawImage(image, 0, 0, d1, HEIGHT, dx + d0, dy, d1, HEIGHT);  
    }  
    else {  
        contextBuffer.drawImage(image, left, 0, WIDTH, HEIGHT, dx, dy, WIDTH, HEIGHT);  
    }  
}

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

分享到：

nodejs的require模块(文件模块/核心模块 ... | Html5 Canvas的充分运用：实用示例

2013-12-15 10:43
浏览 6304
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论