HTML5中canvas标签加载图像的问题

最新推荐文章于 2024-04-22 10:26:52 发布

原创最新推荐文章于 2024-04-22 10:26:52 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web html5 canvas d

web 专栏收录该内容

1 篇文章

订阅专栏

本文详细探讨了在JavaScript中加载图像时遇到的问题，特别是使用getImage方法时需要注意的细节。通过实例演示了如何正确地加载并显示图像，避免了常见的加载失败情况。介绍了使用onload事件来确保图像完全加载后再进行绘图操作，从而有效解决了图像加载问题。

之前按照例子，加载图像，发现加载图像，加载不上去：需要重复调用下drawImage才可以。

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

</script>

后来，发下应该是加载的问题，调用一个image方法既可以

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
image.onload = function(){cxt.drawImage(img,0,0)}