Javascript 在不同xy坐标的阵列上按顺序绘制不同图像的阵列

我有一张画布：

<canvas id="canvas" width="500px" height="500px"></canvas>

我有以下脚本：

function ClearLeft(){
    let clearLeft = canvas.height - 5;
    ctx.fillRect(2, 2, 345, clearLeft);
};

function ReDraw(){
    ClearLeft();
    //RIBBONS
    let CheckedRibbons = RibbonsArray.filter(element => element.checked == true);
        if (CheckedRibbons.length == arr1.length){
            CheckedRibbons.forEach(Ribbon => {
                let x = arr1[0][0];
                let y = arr1[0][1];
                let img = new Image();
                img.src = `Ribbons/${Ribbon.value}.png`
                img.addEventListener('load', () => {
                ctx.drawImage(img, x, y);
                });
            });
        } else if (CheckedRibbons.length == arr2.length){
        //When 2 Ribbons are checked -> Draw Ribbon 1 at arr2[0] which is [69, 235].
        //                           -> Draw Ribbon 2 at arr2[1] which is [175, 235].

        } else if (CheckedRibbons.length == arr3.length){
        //When 3 Ribbons are checked -> Draw Ribbon 1 at arr3[0] which is [16, 235].
        //                           -> Draw Ribbon 2 at arr3[1] which is [122, 235].
        //                           -> Draw Ribbon 3 at arr3[2] which is [228, 235].
        
        }
};//REDRAW ENDS

正如您所看到的，在选择2或3个色带的情况下，我试图找出一种方法来绘制位于“CheckedRibbons”中的每个色带…顺序…在长度匹配的数组的每个对应索引处（这是一个很好的例子，希望我没有弄糟）。

---

我尝试过在不同的配置中嵌套“forEach”，尝试过使用索引。我就是不明白这一点。

如果您稍微改变一下数据结构，有几种方法可以更容易地做到这一点。好处是您的代码不需要更改或重复，它将完全依赖于数据更改，从长远来看，这是一种更易于维护的方法

这里有两个不同的例子来说明我的意思，当然有很多方法来组织你的数据，这只是我选择的两种方法。每个示例下面都有完整的工作代码（我使用了一个测试图像）

第一个示例使用一个数组，由数组组成。。。数组的数目。这不是表示数据的最清晰的选项，因为您始终必须访问0索引处的初始数据，就像这样

const renderGroups = [
  [
    [122, 235]
  ],
  [
    [69, 235],
    [175, 235]
  ],
  [
    [16, 235],
    [122, 235],
    [228, 235]
  ],
  [
    [122, 220],
    [16, 250],
    [122, 250],
    [228, 250]
  ],
  [
    [69, 220],
    [175, 220],
    [16, 250],
    [122, 250],
    [228, 250]
  ]
];

// access data group, since renderGroups is an array all data lives on the 0 index.
const renderGroup = renderGroups.filter(group => group.length === CheckedRibbons.length)[0]; 

当我们在

resultsGroup

renderGroups.filter（el=>el.length==2）

这就是
resultsGroup
的外观

[
  [
    [69, 235],
    [175, 235]
  ]
]

这是由于
filter
返回一个数组，这意味着要访问第一个组，我们需要执行
array[0]
，然后将其转换为

  [
    [69, 235],
    [175, 235]
  ]

这就给了我们正常的配对。因此
Array[0]
例如：

[69, 235]

这是另一个数组，所以我们需要做
array[0][0]
来得到69，etc


让RibbonsArray=Array.from（document.getElementsByClassName（“Ribbons”）；
让CheckedRibbons=RibbonArray.filter（element=>element.checked==true）；
常量renderGroups=[
[
[122, 235]
],
[
[69, 235],
[175, 235]
],
[
[16, 235],
[122, 235],
[228, 235]
],
[
[122, 220],
[16, 250],
[122, 250],
[228, 250]
],
[
[69, 220],
[175, 220],
[16, 250],
[122, 250],
[228, 250]
]
];
const canvas=document.querySelector（'canvas'）；
const ctx=canvas.getContext（'2d'）；
函数ClearLeft（）{
让clearLeft=canvas.height-5；
ctx.fillRect（2,2345，clearLeft）；
};
函数重画（）{
ClearLeft（）；
//丝带
让CheckedRibbons=RibbonArray.filter（element=>element.checked==true）；
const renderGroup=renderGroups.filter（group=>group.length===checkedlibbons.length）[0]；
CheckedRibbons.forEach（（Ribbon，idx）=>{
设x=renderGroup[idx][0]；
设y=renderGroup[idx][1]；
设img=新图像（）；
img.src=https://i.picsum.photos/id/130/200/200.jpg?hmac=pMGv0FZ4yiuwOp40JbbSUg8DSKRdq2Rx70VXtqMrbjI';
img.addEventListener（'load'，（）=>{
ctx.drawImage（img，x，y）；
});
});
}
//重新绘制端点

非常感谢。当我在电脑前的时候，我会给你一个机会，如果我遇到任何事情，我会让你知道。我已经知道你写的有道理了。是的！它起作用了！谢谢洛塔！！！我在这件事上被困了很长时间，令人尴尬。你太棒了！如果您不介意的话，可以在这里详细介绍一下：//access数据组，因为renderGroups是一个数组，所有数据都位于0索引上。const renderGroup=renderGroups.filter（group=>group.length===checkedlibbons.length）[0]@塞伦：我更新了我的答案，并做了解释，希望它能让我的意思更清楚一点。
  [
    [69, 235],
    [175, 235]
  ]

[69, 235]