HTML5/캔버스 깜박임 애니메이션

Question

Does HTML5/Canvas Support Double Buffering? 및 관련 질문을 읽었으며 이중 버퍼링을 사용하지만 도움이 필요하지 않습니다. 번. 실제로 더블 버퍼링을 위해 다른 방법을 사용하지만 같은 문제가 있습니다.

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

더블 버퍼링이 필요하지 않습니다. 브라우저의 엔진에 이미 구현되어 있습니다. scr_context에 모든 것을 그려 넣고 scr_context.fillRect()을 다른 도면보다 먼저 drawLoop() 위에 놓습니다. getDrawCoordinatesByXY()이 화면 값을 항상 반환합니까?