我正在关注在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();
答案 0 :(得分:17)
圆圈可能没有显示,因为您在加载图像之前正在绘制它。将您的上一个陈述更改为:
// Lets not init until the image is actually done loading
topMap.onload = function() {
init();
}
点击刷新后它起作用的原因是因为图像现在已预先加载到缓存中。
您总是希望在尝试绘制图像之前等待加载任何图像,否则不会在画布上显示任何图像。