Question

我用来加载两张图片的代码（请注意，一张图片是7MB（我知道 - 我稍后会修复）。

var loaded = 0;
var img1 = new Image();
var img2 = new Image();
img1.onload = function(){ both() };
img2.onload = function(){ both() };
img1.src = 'map.png';
img2.src = 'ovl.png';

function both() {
    loaded++
    console.log(loaded);
    if (loaded == 2) {
        console.log("LOADED");
        resizeCanvas();
        console.log("RESIZED");
    }
}

function resizeCanvas() {
    //resize code
    drawStuff();
}
function drawStuff() {
    console.log("DRAWSTART");
    ctx.save();
    ctx.setTransform(1,0,0,1,0,0);
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fillStyle="#868f9c";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();
    ctx.drawImage(img1, 0,0);
    ctx.drawImage(img2, 0,0);
    console.log("DRAWED");
}

正如预期的那样，控制台输出是;

(index):28 1
(index):28 2
(index):30 LOADED
(index):81 DRAWSTART
(index):90 DRAWEND
(index):64 RESIZED

但大多数时候，图像无处可寻。有时它们会在~30秒后出现，但之后没有其他功能可用（我还有一些平移/缩放功能）。

请注意，如果我注释掉其中一个ctx.drawImage(img[1,2], 0,0);，那么它的效果非常好。看起来画两幅图像似乎并不起作用......

Answer 1

您应首先使用小图片进行测试，以便检查一切正常。然后，为了管理大图像，您可以使用预加载库，如http://www.createjs.com/preloadjs

画布图像不画画？

1 个答案: