JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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 – 绘制到HTML5 Canvas的图像在第一次加载时无法正确显示全部内容,希望文章能够帮你解决javascript – 绘制到HTML5 Canvas的图像在第一次加载时无法正确显示所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。