canvas drawImage顺序层级问题

Question

    var canvas = document.getElementById('poster');
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    console.log(windowWidth, windowHeight)
    canvas.width = windowWidth * 0.76;
    canvas.height = canvas.width * 1.6;
    canvas.style.marginLeft = windowWidth * 0.12 + 'px';
    canvas.style.marginTop = windowHeight * 0.07 + 'px';

    var ctx = canvas.getContext('2d');
    var ratio = getPixelRatio(ctx);
//    {width,x,y}
    var postionArr = [
        {width: 0.86, x: 0.07, y: 0},
        {width: 0.88, x: 0.06, y: 0.33},
        {width: 0.76, x: 0.12, y: 0.335},
        {width: 0.72, x: 0.14, y: 0.34},
        {width: 0.6, x: 0.02, y: 1.2},
        {width: 0.2, x: 0.68, y: 1.21}];
    $('.poster-p').each(function (index, item) {
        var img = new Image();
        img.src = $(item).attr('src');
        img.onload = function () {
            ctx.drawImage(img, $('#poster').width() * postionArr[index].x * ratio, $('#poster').width() * postionArr[index].y * ratio, $('#poster').width() * postionArr[index].width * ratio, $('#poster').width() * postionArr[index].width * ($(item).height() / $(item).width()) * ratio);
        };
    });

现在这个顺序正常绘制层级应该是对的 应该是加载完成顺序不同
所以文件比较大的最后绘制在最上面了 没有按照循环的顺序

请问应该怎么控制呢

换成小一些的图片能正常顺序 的绘制了

Answer 1

1. 首先，canvas渲染图片要等到图片加载完才会触发，所以你无法控制每一个图片加载完成的先后顺序。 建议：将所有的图片资源放在一个图片预加载数组中，在draw之前先将所有的图片资源加载完成。（可参考：https://github.com/PengJiyuan...）
2. 可以对要渲染的资源数组设置index。在渲染之前Array.sort，可以控制渲染的先后顺序。（同上，可参考：https://github.com/PengJiyuan...）

Answer 2

写在回答里吧。

你写的循环体里，只做了三个事，新建、加载、注册回调。而注册回调并不会阻塞下一循环的发生，所以在加载时间有长有短的前提下，自然就是按大小来决定先后次序咯。
所以我为什么说你可以在前边加个预加载，就是因为要断开“加载”和“drawImage”之间的依赖关系（因为你drawImage是写在加载回调里的，所以实际上drawImage会依赖于加载）：先加载，然后按次序（去找个独立的次序数据来）drawImage，就不会出现你的这个问题了。

Answer 3

1,首先，canvas渲染图片要等到图片加载完才会触发，所以你无法控制每一个图片加载完成的先后顺序。建议：将所有的图片资源放在一个图片预加载数组中，在draw之前先将所有的图片资源加载完成。
2, 可以对要渲染的资源数组设置index。在渲染之前 Array.sort，可以控制渲染的先后顺序。

3, Array渲染时候，使用for循环 + await 的方式控制promise，异步变成同步执行。