绘制到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();
}

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

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