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

时间:2011-12-01 18:31:54

标签: javascript html5 canvas

我正在关注在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();

1 个答案:

答案 0 :(得分:17)

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

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

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

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