javascript - HTML5 Canvas 在绘图时闪烁

Question

我从一个等距游戏开始，当绘制地面的所有部分时，我的 Canvas 在闪烁(不在 IE 中)。当我将 fps 设置为 20 或更低时，闪烁停止。我该如何解决？有任何想法吗？

var camerax = 300, cameray = 100;
var fps = 60;

function draw() {
    clearCanvas();
    drawGround();
}

function drawGround() {
    var img = new Image();
    img.onload = function() {
    var width = img.width;
    var height = img.height;
    for (var x = 0; x < 3; x++) {
        for (var y = 3; y >= 0; y--) {
                mx = (x-y)*height + camerax;
                my = (x+y)*height/2 + cameray; 
                ctx.drawImage(img, mx, my);
             }
        }
    }
    img.src = "ground.png";
}

var loop = setInterval(function() {
    update();
    draw();
}, 1000/fps);

Answer 1

现在你每帧都重新加载图像，除非 onload回调在帧的 16 毫秒内触发，您将看到一个空白 Canvas 。

您只需调用new Image , img.onload序列一次，以预加载您的图像。 onload然后回调将启动您的第一帧，并且绘制调用可以自由使用内存中的图像。

就像是:

var camerax = 300, cameray = 100;
var fps = 60;
var img;
var loop;

function init() {
    img = new Image();
    img.onload = function() {
        loop = setInterval(function() {
            update();
            draw();
        }, 1000/fps);
    };
    img.src = "ground.png";
}

function draw() {
    clearCanvas();
    drawGround();
}

function drawGround() {
    var width = img.width;
    var height = img.height;
    for (var x = 0; x < 3; x++) {
        for (var y = 3; y >= 0; y--) {
                mx = (x-y)*height + camerax;
                my = (x+y)*height/2 + cameray; 
                ctx.drawImage(img, mx, my);
             }
        }
    }
}

当然，一旦您等待多个图像预加载，它会变得更加复杂，因为您只需要在所有图像都完成后启动循环。