canvas 画图片没有显示

最新推荐文章于 2025-06-27 16:34:25 发布

caoPengFlying

最新推荐文章于 2025-06-27 16:34:25 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html/css 文章标签： canvas 图片

本文链接：https://blog.youkuaiyun.com/caoPengFlying/article/details/78655039

html/css 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个H5 Canvas绘图时遇到的问题及解决方案。由于图片异步加载导致绘图失败，通过将绘图代码置于窗口加载事件中解决。文章提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

h5新添加了一个元素叫做canvas画布，可以用它画出很多的图形。其中提供了一个方法 drawImage
方法的说明可以看canvas手册
我按照上面写了一个demo

<body>
    <img src="furit.png" id="fruit">
    <canvas id="canvas" width="400" hegiht="400"></canvas>
</body>

var fruit = document.getElementById("fruit");
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.drawImage(fruit,40,40);

这样之后打开页面怎么都显示不出来，原来习惯ctrl + f5 强制刷新页面，怎么刷新都不显示，各种有问题，然后没有强制刷新，普通刷新一遍就有了。这个时候意识到了图片是异步加载的，所以是在图片加载完毕之前就执行了js代码，如果强制刷新就还是一样的要重新加载，而如果是普通刷新就会用缓存去加载资源，重新执行js代码。后面我在代码中加入了一下几行就可以打开页面就画出图片了

window.onload = function(){ 
    var fruit = document.getElementById("fruit");
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');
    context.drawImage(fruit,40,40);
}