js canvas 批量插入图片

js canvas 批量插入图片

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var imageUrls  = json.msg;
    var imagesLoaded = 0;
    var loadImages = (urls, callback) => {
        var images = [];
        var loader = (url) => {
            var img = new Image();
            img.onload = () => {
                images.push(img);
                if (++imagesLoaded === urls.length && callback) {
                    callback(images);
                }
            };
            img.src = url;
        };

        urls.forEach(loader);
    };
    var drawImages = (images) => {
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var imageWidth = canvasWidth / images.length;
    var imageHeight = canvasHeight;
    let x = 0;

    images.forEach((img) => {
        ctx.drawImage(img, x, 0, imageWidth, imageHeight);
        x += imageWidth;
    });
};

// 使用函数
loadImages(imageUrls, (images) => {
    drawImages(images);
});