javascript - 不使用 onload() 绘制

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；

像这样（JSFiddle Here）。

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

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

编辑

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

Answer 2

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

img.onload = loaded;

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