调用drawImage()在canvas标签中不显示图像的问题及解决方案

最新推荐文章于 2024-01-26 19:24:23 发布

nice-tom

最新推荐文章于 2024-01-26 19:24:23 发布

阅读量4.5k

点赞数 3

文章标签： javascript js 前端

本文链接：https://blog.csdn.net/lxow456/article/details/106447307

版权

问题描述

初学红宝书中的canvas标签，在学到drawImage方法的时候，根据书上的代码敲了一遍但在自己的canvas中显示不出图像。

书中代码：

var image=document.images[0];
context.drawImage(image,10,10);

照着敲到了自己的代码中，结果canvas中始终是一片空白。

原因

百度之后，得出原因：等图片加载成功后才可以绘制，当图片未加载成功时使用drawImage()，不会被调用，绘制会失败。

解决方案

1.当图像使用img标签时：

<body>
<canvas id="drawing" width="300" height="300"></canvas>
<img src="mc.png" id="image">
</body>

使用window.onload监听图像是否加载成功，加载成功后才调用drawImage()

window.onload=function(){
    var image=document.getElementById("image");
    var drawing=document.getElementById("drawing");
    var context=drawing.getContext("2d");
    context.drawImage(image,0,0);
}

2.当使用new Image()创建图像对象时,监听图像对象本身是否加载成功。

var drawing=document.getElementById("drawing");
var context=drawing.getContext("2d");
var image=new Image();
image.src="mc.png";
image.onload=function(){
    context.drawImage(image,0,0);
}

效果

drawImage()

参考文档
https://www.cnblogs.com/padding1015/p/9717845.html

如果感到这篇文档对你有用，麻烦点个赞~

nice-tom

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
调用drawImage()在canvas标签中不显示图像的问题及解决方案

问题描述初学红宝书中的canvas标签，在学到drawImage方法的时候，根据书上的代码敲了一遍但在自己的canvas中显示不出图像。书中代码：var image=document.images[0];context.drawImage(image,10,10); 照着敲到了自己的代码中，结果canvas中始终是一片空白。原因百度之后，得出原因：等图片加载成功后才可以绘制，当图片未加载成功时使用drawImage()，不会被调用，绘制会失败。解决方案 1.当图像使用img标签时
复制链接

扫一扫