javascript - 如何在 Canvas 上的图层中绘制图像？

Question

我有一个 Canvas ，我使用 drawImage将一堆图像绘制到 Canvas 上。
我希望结果如何:
我希望我绘制的第一张图像位于第 1 层，下一张图像位于第 2 层，依此类推
真正发生的事情:
图像被放置在随机图层上。

const images = [
    'https://attefallsverket.picarioxpo.com/1_series_base.jpg?1=1&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_housebase.png?1=1&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_facade_roof_panels.pfs?1=1&p.c=&p.tn=wooden_summer_green.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_windows.pfs?1=1&p.c=71343a&p.tn=&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_door_01.pfs?1=1&p.c=&p.tn=rainsystem_grey.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_facade_01.pfs?1=1&p.c=&p.tn=wooden_summer_green.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_facade_panels.pfs?1=1&p.c=&p.tn=wooden_summer_green.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_facade_corners.pfs?1=1&p.c=&p.tn=wooden_summer_green.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_tin_windows.pfs?1=1&p.c=&p.tn=rainsystem_white.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_tin_roof.pfs?1=1&p.c=&p.tn=rainsystem_white.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_roof_metal_orange.png?1=1&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_rain_system.pfs?1=1&p.c=&p.tn=rainsystem_white.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1_series_terrace.png?1=1&width=2000',
];

let c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

for(let i=0; i<images.length; i++) {
    let img = new Image();
    img.crossOrigin = '';
    img.src = images[i]
    img.onload = () => {
        ctx.drawImage(img, 0, 0, c.width, c.height);
    }
}

<canvas id="myCanvas" width="280" height="157.5" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

Answer 1

您需要确保第一个图像已加载，然后再启动下一个图像的加载。所以做一个异步循环:

const images = [
    'https://attefallsverket.picarioxpo.com/1_series_base.jpg?1=1&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_housebase.png?1=1&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_facade_roof_panels.pfs?1=1&p.c=&p.tn=wooden_summer_green.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_windows.pfs?1=1&p.c=71343a&p.tn=&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_door_01.pfs?1=1&p.c=&p.tn=rainsystem_grey.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_facade_01.pfs?1=1&p.c=&p.tn=wooden_summer_green.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_facade_panels.pfs?1=1&p.c=&p.tn=wooden_summer_green.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_facade_corners.pfs?1=1&p.c=&p.tn=wooden_summer_green.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_tin_windows.pfs?1=1&p.c=&p.tn=rainsystem_white.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_tin_roof.pfs?1=1&p.c=&p.tn=rainsystem_white.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_roof_metal_orange.png?1=1&width=2000',
    'https://attefallsverket.picarioxpo.com/1kp_rain_system.pfs?1=1&p.c=&p.tn=rainsystem_white.jpg&width=2000',
    'https://attefallsverket.picarioxpo.com/1_series_terrace.png?1=1&width=2000',
];

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");

(function loop(i) {
    if (i >= images.length) return; // all done
    let img = new Image();
    img.crossOrigin = '';
    img.onload = () => {
        ctx.drawImage(img, 0, 0, c.width, c.height);
        loop(i+1); // continue with next...
    }
    img.src = images[i];
})(0); // start loop with first image

<canvas id="myCanvas" width="280" height="157.5"</canvas>