图像绘制为HTML5 Canvas在第一次加载时无法正确显示

我正在学习关于在HTML5画布上导入和显示图像的教程。一切工作正常，直到我试图改变图像本身。例如，我将有一个黄色圆圈作为我的图像，并且脚本正常工作。但是如果我在Paint中自己打开图像并将圆圈更改为红色并刷新页面，则直到我再次单击或手动再次刷新时，该圆圈才会显示。以下是我正在使用的代码片段：图像绘制为HTML5 Canvas在第一次加载时无法正确显示

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();

来源

2011-12-01 Jarek

浏览器缓存，强制缓存重新加载 –

这不是浏览器缓存，他只是不等待新的图像加载完成 –

该圆形可能不会显示，因为您正在加载图像之前绘制它。改变你的最后声明：

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

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

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

来源

2011-12-01 18:52:45

更简单地说，'topMap.onload = drawMap;'。请注意，[你应该设置'onload' _before_你设置'src']（http://stackoverflow.com/questions/4776670/should-setting-an-image-src-to-dataurl-be-available-immediately）。所以：'var topMap = new Image; topMap.onload = drawMap; topMap.src =“topMap.png”;' – Phrogz

谢谢，解决了并解释了我的问题:) – Jarek

请确保您也听取了Phrogz的建议！ –

图像绘制为HTML5 Canvas在第一次加载时无法正确显示

回答

相关问题