Question

绘制小白色矩形而不是图像为什么它是这样以及如何修复它。

var imageReady = false;
img = new Image(); 
img.src = 'player.png'; 
img.onload = loaded();

function loaded() { 
imageReady = true;
redraw(); 
}

function redraw() {
    //ctx.fillStyle = "blue";
    //ctx.fillRect(0, 0, 500, 500);

    if (imageReady) {
        ctx.fillStyle = "white";
        ctx.fillRect(10,10,10,10);
        ctx.drawImage(img, 5, 5);
    }
}

Answer 1

您正在将loaded()传递给onload。尝试传递img.onload = loaded;

赞this (JSFiddle Here)。

var imageReady = false;
img = new Image(); 
img.onload = loaded;

还有一件事，我建议你在src之前设置onload。我不知道浏览器是如何在内部进行加载的，但是，它可以加载太快的图像，你将在加载后发送onload。那可能吗？不知道。

修改

是的，最好还是在设置img.onload = loaded值之前关联回调src。刚测试过，如果Image在缓存中，它可能会在您关联它之前调用onload。

Answer 2

您正在调用loaded()函数并将img.onload分配给该函数的返回值，而不是将img.onload分配给您的函数。尝试将作业更改为：

img.onload = loaded;

另外，我不确定我是否看到了imageLoaded旗帜。

不用onload（）绘制

2 个答案: