HTML5 /帆布閃爍的動畫

Question

我讀過Does HTML5/Canvas Support Double Buffering?和相關的問題，我使用雙緩衝，但它的doesent幫助有些時候。其實我用另一種方式進行雙緩衝，但它有同樣的問題。

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中測試過，兩者都是相同的問題。

Answer 1

你不需要doublebuffering，它已經由瀏覽器的引擎實現了。在任何其他繪圖之前，只需在scr_context上繪製所有內容並在drawLoop()之上保留scr_context.fillRect()。你確定getDrawCoordinatesByXY()總是返回屏幕值？