java canvas双缓存_HTML5 Canvas双缓存实例

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

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

Your browser does not support the canvas element

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);

}

}

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