一个菜鸟的互联网技术分享博客
您的位置: 主页 > canvas的drawImage无法显示图像
advertisement

canvas的drawImage无法显示图像

由于工作上的需要,需要把一个模态框里面的东西以图片形式展示出来,左思右想用canvas吧,查看了w3school里面的文档,初略的撸了几行代码,但是问题出来了,文字用ctx.fillText这个方法可以实现,但是当用到drawImage()这个方法的时候问题到了,那就是图片不显示,但是w3school上面的文档里面是显示正常的,如下图所示:


但是在编辑器里面编辑好了之后,代码如下:



可以说和w3school上面的方法使用方式是一样的,但是一看结果。。。。



一脸懵逼,左看右看是不是代码有问题,后面确认下没问题就百度了下drawImage()方法不显示图片的原因,看了几篇别人的博客,找下共同点,然后自己改了下代码就正常显示了。代码如下:


显示结果如下:


一切OK,原来重点是要考虑图片加载时间以及文字内容和图片内容加载先后的顺序。。。
zhangren.online
上一篇:火眼金睛识".eq"和":eq"
下一篇:canvas作图

您可能喜欢

​canvas的drawImage无法显示图像

​canvas的drawImage无法显示图像

​解决一个页面多个enter事件的混乱

​解决一个页面多个enter事件的混乱

​js获取一个对象的长度

​js获取一个对象的长度

回到顶部