javascript – 绘制到HTML5 Canvas的图像在第一次加载时无法正确显示

前端之家收集整理的这篇文章主要介绍了javascript – 绘制到HTML5 Canvas的图像在第一次加载时无法正确显示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在关注在 HTML5画布上导入和显示图像的教程.一切正常,直到我尝试改变图像本身.例如,我将有一个黄色的圆圈作为我的图像,脚本工作正常.但是,如果我在Paint中打开图像本身并将其更改为红色,并刷新页面,则在手动再次单击或再次刷新之前,该圆圈将不会显示.以下是我使用的代码段:
var topMap = new Image();
topMap.src = "topMap.png";

function drawMap() {
    context.clearRect(0,WIDTH,HEIGHT);
    context.drawImage(topMap,0);
}

function init() {
    drawMap();
}

init();

解决方法

该圈子可能不会显示,因为您在加载图像之前绘制它.将最后一个语句更改为:
// Lets not init until the image is actually done loading
topMap.onload = function() {
  init();
}

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

您总是想等待任何图像加载,然后再尝试绘制它们,否则任何内容都不会显示在画布上.

猜你在找的JavaScript相关文章