//canvas图片绘制
/**
* 1.必须等图片加载完成后才能使用drawImage方法
* 2.Image默认不支持访问跨域资源,必须手动指定crossOrigin属性,才可以跨域访问图片
*/
https://www.w3school.com.cn/tags/canvas_drawimage.asp
addImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "anonymous";
img.onload = () => {
resolve(img);
};
img.onerror = () => {
reject();
};
img.src = src;
if (img.complete) {
resolve(img);
}
});
}
this.addImage(src).then((img) => {
this.ctx.drawImage(img, 0, 0, img.width, img.height);
// 在这之后才能继续绘制其他图片
this.addImage(xxx);
});
图片依次绘制 从最底层到最高层。
网友评论