html5 闪动动画,HTML5 /帆布闪烁的动画

我读过Does HTML5/Canvas Support Double Buffering?和相关的问题，我使用双缓冲，但它的doesent帮助有些时候。其实我用另一种方式进行双缓冲，但它有同样的问题。HTML5 /帆布闪烁的动画

function drawLoop() {

var scr_context = scr.getContext('2d'); // main canvas

var units_context = units_buffer.getContext('2d'); // units buffer

var unitcolors_context = unitcolors_buffer.getContext('2d'); // units color buffer

var i;

// background

scr_context.fillStyle = "#FFFFEE";

scr_context.fillRect(0, 0, scr.width, scr.height);

units_context.clearRect(0, 0, units_buffer.width, units_buffer.height);

unitcolors_context.clearRect(0, 0, unitcolors_buffer.width, unitcolors_buffer.height);

for (i = 0; i < units_list.length; i++) {

units_list[i].draw(units_context, camera); // flicker some times

units_list[i].drawColor(unitcolors_context, camera); // never flicker

}

scr_context.drawImage(unitcolors_buffer, 0, 0);

scr_context.drawImage(units_buffer, 0, 0);

drawTimer = setTimeout(drawLoop, 1000/FPS);

}

抽奖方法：

this.draw = function(context, camera) {

var sprite;

var drawCoordinates;

sprite = this.sloader.getSpriteByName(this.spritePos.spriteName);

drawCoordinates = sprite.getDrawCoordinatesByXY(this.spritePos.x, this.spritePos.y, camera);

context.drawImage(sprite.getImage(), drawCoordinates.x, drawCoordinates.y);

return;

}

this.drawColor = function(context, camera) {

var sprite;

var drawCoordinates;

sprite = this.sloader.getSpriteByName(this.spritePos.spriteName);

drawCoordinates = sprite.getDrawCoordinatesByXY(this.spritePos.x, this.spritePos.y, camera);

context.putImageData(this.unitMarkBackground, drawCoordinates.x + 21, drawCoordinates.y + 17);

return;

}

不知道如何闪烁发生或不会发生在几乎相同的代码，相同的缓冲。我已经在Chrome 20和FireFox 13中测试过，两者都是相同的问题。

2012-07-06

Sorc

+0

使用requestanimationframe而不是标准超时会发生什么？ –

2012-09-14 01:33:06