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图片绘制。