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

我需要对代码进行哪些更改才能停止闪烁？

- Juliano Lima

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之外，第一次我忽略了它。

- Zach Saucier

---

发生了以下情况：当调用clearRect时，屏幕仍在闪烁，字符消失了。 :/ - Juliano Lima

屏幕仍在闪烁，当调用clearRect时字符消失了。 :/ - Juliano Lima

@Zeaklous：你差不多快做对了……将imgCharacter.onload移到renderMap之外，然后在其中调用renderMap()。然后在renderMap中，只需使用context.drawImage(imgCharacter,posX,posY)即可。 - markE

将 .src 移动到 .onload 的闭合大括号之后 ;) - markE

好奇怪，我猜我的角色停了但是屏幕还在闪烁！我不认为问题在于角色，而是clearRect。 - Juliano Lima

Answer 2

在绘制并将其存储在数组中之前，加载所有图像和其他数据。
最好使用requestAnimationFrame。
记住，获取JSON（或其他数据）可能需要一些时间。

- trebor