canvas绘制多张图其中有空白或绘制不成功的问题

最新推荐文章于 2023-01-06 17:36:10 发布

weixin_34082789

最新推荐文章于 2023-01-06 17:36:10 发布

阅读量1.8k

点赞数

文章标签： javascript java ViewUI

原文链接：https://segmentfault.com/a/1190000017928161

版权

一般来说绘制很多张图片中间有几张没画出来通常就是没load得原因，具体如下：

let arr = ['img1','img2','img3'];
let Canvas = document.createElement('canvas');
ctx = Canvas.getContext("2d");
let {W, H} = {100, 200};
let scaleBy = 2;
arr.forEach(e => {
    let bgImg = document.creatElement('img');
    bgImg.src = e;
    bgImg.onload = () => {
        ctx.drawImage(bgImg, 0, 0, W * scaleBy, H * scaleBy);
        
        let newImg = document.createElement('img');
        newImg.src = Canvas.toDataURL();
        document.body.appendChild(newImg);
    }
})