绘制到HTML5 Canvas的图像在首次加载时无法正确显示

Question

我正在关注在HTML5画布上导入和显示图像的教程。 一切正常，直到我尝试改变图像本身。 例如，我将有一个黄色圆圈作为我的图像，脚本工作正常。 但是如果我在Paint中打开图像本身并将圆圈更改为红色并刷新页面，则直到我再次手动点击或再次刷新时，圆圈才会显示。 这是我正在使用的代码片段：

var topMap = new Image();
topMap.src = "topMap.png";

function drawMap() {
    context.clearRect(0, 0, WIDTH, HEIGHT);
    context.drawImage(topMap, 0, 0);
}

function init() {
    drawMap();
}

init();

Answer 1

圆圈可能没有显示，因为您在加载图像之前绘制它。 将您的上一个陈述更改为：

// Lets not init until the image is actually done loading
topMap.onload = function() {
  init();
}

点击刷新后它工作的原因是因为图像现在已预先加载到缓存中。

您总是希望在尝试绘制图像之前等待加载任何图像，否则画布上不会显示任何图像。