重繪畫布html5而不閃爍

Question

我每 25 毫秒重繪一次屏幕，圖像閃爍，這是我的代碼

                var FRAME_RATE = 40;
                var intervalTime = 1000/FRAME_RATE;
                gameLoop();

                function gameLoop(){
                    context.clearRect(0, 0, 640, 640);
                    renderMap();
                    window.setTimeout(gameLoop, intervalTime);  
                }

這是 renderMap() 函數

function renderMap(){
                    var startX = playerX - (screenW / 2);
                    var startY = playerY - (screenH / 2);

                    maxX = playerX + (screenW / 2);
                    maxY = playerY + (screenH / 2);
                    $.getJSON('mapa3.json', function(json){
                        for (x = startX; x < maxX; x=x+32){ 
                            for (y = startY; y < maxY; y=y+32){
                                intTile = json.layers[0].data[((y/32)* 100) + (x/32)];
                                context.putImageData(getTile(intTile - 1), x - startX, y - startY);
                            }
                        } 
                    });

                    var imgCharacter = new Image();
                    imgCharacter.src = 'char.png';

                    var posX = (screenW - imgCharacter.width) / 2;
                    var posY = (screenH - imgCharacter.height) / 2;
                    imgCharacter.onload = function(){context.drawImage(imgCharacter, posX, posY)}       
                }

我需要對代碼進行哪些更改才能停止閃爍？

Answer 1

我相信這是因為您每次迭代都在加載圖像。 嘗試將var imgCharacter... 、以下行以及圖像的onload函數放在renderMap之外，以便它只運行一次

var imgCharacter = new Image();    
imgCharacter.onload = function () {
    renderMap();
}
imgCharacter.src = 'char.png';

function renderMap() {
    var startX = playerX - (screenW / 2);
    var startY = playerY - (screenH / 2);

    maxX = playerX + (screenW / 2);
    maxY = playerY + (screenH / 2);
    $.getJSON('mapa3.json', function (json) {
        for (x = startX; x < maxX; x = x + 32) {
            for (y = startY; y < maxY; y = y + 32) {
                intTile = json.layers[0].data[((y / 32) * 100) + (x / 32)];
                context.putImageData(getTile(intTile - 1), x - startX, y - startY);
            }
        }
    });

    var posX = (screenW - imgCharacter.width) / 2;
    var posY = (screenH - imgCharacter.height) / 2;

    context.drawImage(imgCharacter, posX, posY)
}

感謝 markE 讓我知道onload函數也需要在renderMap之外，我第一次忽略了它

Answer 2

在繪制之前加載所有圖像和其他數據並將它們存儲在數組中。
更好地使用requestAnimationFrame 。
請記住，獲取 JSON（或其他數據）可能需要一些時間。