【bug解决】使用canvas绘制图片时无效

W3C上介绍的可以用canvas的drawImage方法绘制图片：

相应的HTML代码如下：

<html>
<head>
</head>
<body>
　　<canvas></canvas>
　　<img src="图片地址" id="tulip"></img>
</body>
</html>

但是这样子按照上面js代码操作之后会发现，图片并没有绘制在canvas画布上，但是我们在var img = document.getElementById('tulip')这句代码之后console.log(img)却发现img是获取到了的，那为什么绘制不出来呢?

经过一番测试之后，发现如果将代码写在window.onload事件中就能绘制成功，这说明，在我们使用drawImage方法的时候，获取的img元素并没有加载绘制完成。

这样我们就知道了，必须要在图片资源加载完毕之后才能够进行canvas的图片绘制，主要方法可以有以下两种：

// 直接将页面中的img绘制在canvas中

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let img = document.getElementsByTagName('img')[0];
img.onload = function() {
    ctx.drawImage(img, 10, 300, 200, 260);
}       
// 动态创建img标签

let img = new Image();
img.src = './image/1.jpg'; // 图片地址
img.onload = function () {
    ctx.drawImage(img, 0, 0, 300, 400);
};

总之，不论是哪种方法，都要在img.onload事件中进行canvas图片绘制。

posted @ 2020-02-25 15:39  WANNANANANA  阅读(1902)  评论(0)  编辑  收藏  举报