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

使用requestanimationframe而不是标准超时会发生什么？ – Alex 2012-09-14 01:33:06

你不需要doublebuffering，它已经由浏览器的引擎实现了。在任何其他绘图之前，只需在scr_context上绘制所有内容并在drawLoop()之上保留scr_context.fillRect()。你确定getDrawCoordinatesByXY()总是返回屏幕值？

来源

2012-11-01 12:33:30 noiv

HTML5 /帆布闪烁的动画

回答

相关问题