重绘画布html5而不闪烁答案

【问题标题】：redrawing canvas html5 without flickering重绘画布html5而不闪烁
【发布时间】：2013-08-27 18:02:33
【问题描述】：

我的屏幕每 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)}       
                }

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

【问题讨论】：

标签： javascript html canvas redraw

【解决方案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之外，我第一次忽略了它

【讨论】：

会发生以下情况：屏幕仍然闪烁，调用 clearRect 时字符消失.. :/
屏幕仍然闪烁，当调用 clearRect 时字符消失.. :/
@Zeaklous：你几乎搞定了……将你的 imgCharacter.onload 移到 renderMap 之外，然后在该 onload 中调用 renderMap()。然后在renderMap里面，就是context.drawImage(imgCharacter,posX,posY)
这是我的代码imgCharacter.onload = function(){ renderMap(); context.drawImage(imgCharacter, posX, posY); }，在 renderMap 中，我将 drawImage 和返回的值放入最后一行：HTMLImageElement、HTMLCanvasElement、HTMLVideoElement 到这一行。
试试我编辑的答案，我相信这是 markE 的建议

【解决方案2】：

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

【讨论】：