canvas中调用drawImage图像不出现在画布上的问题

最新推荐文章于 2023-06-24 15:53:49 发布

qq_45512210

最新推荐文章于 2023-06-24 15:53:49 发布

阅读量861

点赞数

分类专栏：前端文章标签： canvas

本文链接：https://blog.csdn.net/qq_45512210/article/details/106039631

版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种常见的情况，即在HTML中使用drawImage方法显示图片时遇到的问题及解决方案。当图片没有在画布上正确展示时，需确保图片加载完成后再进行绘制。文章提供了一个具体的代码示例，展示了如何通过监听图片的onload事件来实现正确的图像绘制。

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

遇到问题
找到图片img元素后，将参数传给context.drawImage(image,10,10)后图片并没有在画布上展示。

解决方案：
图像需调用onload事件，包裹住绘制图像方法drawImage即可。

代码如下：

 document.images[0].onload=function(){
                var context=drawing.getContext('2d');
                // 获取img元素
                var image=document.images[0];
                context.drawImage(image,0,10,50,50,0,100,40,60);
           }