绘制到HTML5 Canvas的图像在第一次加载时不能正确显示

Image drawn to HTML5 Canvas does not display correctly on first load

本文关键字：加载 不能 显示 第一次 HTML5 Canvas 图像 绘制      更新时间：2023-09-26

我正在遵循在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();

圆圈可能没有显示，因为您在加载图像之前绘制它。将最后一条语句更改为:

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

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

你总是想等待任何图像加载之前，你试图绘制他们，否则什么也不会显示在画布上。

相关文章：