如何按顺序在对应坐标数组中绘制选中的Ribbon图片？

看起来你遇到的核心问题是没有利用forEach的索引参数来匹配选中项和坐标数组的对应位置，以及代码结构可以更简洁。我来帮你修正并优化这段逻辑：

首先，先确保你的Canvas上下文和复选框数组是全局可访问的（避免函数内重复获取，提升效率）：

// 全局定义Canvas相关变量
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 全局获取复选框数组，避免每次ReDraw都重新查询DOM
const RibbonsArray = Array.from(document.getElementsByClassName("Ribbons"));

// 你的坐标数组保持不变
var arr1 =[ [122, 235] ];
var arr2 =[ [69, 235], [175, 235] ];
var arr3 =[ [16, 235], [122, 235], [228, 235] ];
var arr4 =[ [122, 220], [16, 250], [122, 250], [228, 250] ];
var arr5 =[ [69, 220], [175, 220], [16, 250], [122, 250], [228, 250] ];

接下来是修正后的ReDraw函数，我加入了坐标映射表和索引匹配逻辑，同时优化了图片加载的健壮性：

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

function ReDraw(){
  ClearLeft();
  
  // 获取选中的Ribbon列表
  const CheckedRibbons = RibbonsArray.filter(element => element.checked);
  
  // 建立「选中数量」与「坐标数组」的映射，替代冗长的else if
  const positionMap = {
    1: arr1,
    2: arr2,
    3: arr3,
    4: arr4,
    5: arr5
  };
  
  // 获取当前选中数量对应的目标坐标数组
  const targetPositions = positionMap[CheckedRibbons.length];
  
  // 只有当存在对应坐标数组时才执行绘制
  if (!targetPositions) return;
  
  // 遍历选中的Ribbon，用索引匹配对应坐标
  CheckedRibbons.forEach((ribbon, index) => {
    // 防止索引越界（比如异常情况下选中数量和坐标数组长度不匹配）
    if (index >= targetPositions.length) return;
    
    const [x, y] = targetPositions[index];
    const imgUrl = `Ribbons/${ribbon.value}.png`;
    
    // 创建图片并绘制
    const img = new Image();
    // 处理图片加载失败的情况，方便调试
    img.onerror = () => console.error(`无法加载图片: ${imgUrl}`);
    img.onload = () => {
      ctx.drawImage(img, x, y);
    };
    img.src = imgUrl;
  });
}

关键改进点说明： #

1. 用positionMap简化逻辑：
   把不同数量的坐标数组统一放到映射表里，避免写一堆else if，后续新增更多数量的坐标数组时，只需要在positionMap里添加一行即可，代码更易维护。

2. 利用forEach的索引参数：
   forEach((ribbon, index) => {...})里的index就是当前选中项的顺序索引，用它去取targetPositions[index]，就能完美实现「第一个选中的Ribbon对应第一个坐标，第二个对应第二个」的需求——这正是你之前缺失的核心逻辑。

3. 增加健壮性处理：

   • 加入了if (!targetPositions) return;，防止选中数量没有对应坐标数组的情况。
   • 加入了索引越界检查，避免异常报错。
   • 新增onerror回调，方便排查图片路径错误的问题。

额外优化建议（可选）： #

如果希望提升性能，避免重复加载图片，可以添加一个图片缓存：

// 全局图片缓存对象
const imageCache = {};

// 在ReDraw的forEach里替换图片加载逻辑：
const imgUrl = `Ribbons/${ribbon.value}.png`;
if (imageCache[imgUrl]) {
  // 缓存存在，直接绘制
  ctx.drawImage(imageCache[imgUrl], x, y);
} else {
  const img = new Image();
  img.onerror = () => console.error(`无法加载图片: ${imgUrl}`);
  img.onload = () => {
    imageCache[imgUrl] = img;
    ctx.drawImage(img, x, y);
  };
  img.src = imgUrl;
}

这样重复选中同一个Ribbon时，不会重复请求图片资源，提升页面响应速度。

内容的提问来源于stack exchange，提问作者Seren