2

HTML5 / Canvasはダブルバッファリングをサポートしていますか？を読みました。および関連する質問と私はダブルバッファリングを使用していますが、それは時々役に立ちません。実際、私はダブルバッファリングに別の方法を使用していますが、同じ問題があります。

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

同じバッファリングされたほぼ同じコードでちらつきがどのように発生するか、または発生しないかはわかりません。Chrome20とFireFox13でテストしましたが、どちらも同じ問題があります。

4

1 に答える 1

0

ダブルバッファリングは必要ありません。ブラウザのエンジンによってすでに実装されています。scr_contextにすべてを描画し、他の描画scr_context.fillRect()の前に上に置いてください。常に画面の値を返しますかdrawLoop()？getDrawCoordinatesByXY()

于 2012-11-01T12:33:30.750 に答える