HTML Canvas动态宽高问题：多Canvas绑定图片数组代码纠错求助

先梳理下你的代码里存在的几个核心问题：

• 变量 i 没有定义和遍历逻辑，没法循环处理图片数组里的每一张图
• mywidth 和 myheight 未赋值，调用 drawImage 时会导致尺寸异常
• 错误地尝试从 div 元素获取绘图上下文（getContext 是 Canvas 元素的专属方法，div 没有这个属性）
• 缺少对图片数组的循环遍历逻辑，没法为每张图绑定对应的 Canvas
• 如果后续添加循环，还可能遇到闭包作用域陷阱，导致所有 Canvas 最终都加载最后一张图

下面是修正后的完整代码，我会逐点解释修正逻辑：

var mywidth = 300; // 先给画布尺寸赋值，你可以根据需求自行调整
var myheight = 200;

$(function(){
  var Images = ['1.jpg','2.jpg','3.jpg','4.png','5.jpg'];
  var imageLength = Images.length;

  // 遍历图片数组，为每张图匹配对应的Canvas
  for (var i = 0; i < imageLength; i++) {
    // 用立即执行函数捕获当前循环的index值，避免闭包作用域陷阱
    (function(index) {
      var image = new Image();
      // 假设你的Canvas元素ID是canvas0、canvas1...，如果是其他命名规则请修改此处
      var canvas = document.getElementById("canvas"+index);
      if (!canvas) {
        console.error(`找不到ID为canvas${index}的Canvas元素`);
        return;
      }
      var ctx = canvas.getContext("2d");
      // 显式设置Canvas的实际绘图尺寸，避免拉伸变形
      canvas.width = mywidth;
      canvas.height = myheight;

      image.onload = function() {
        // 图片加载完成后，绘制到对应的Canvas中
        ctx.drawImage(image, 0, 0, mywidth, myheight);
      };

      // 设置图片地址，触发加载流程
      image.src = Images[index];
    })(i);
  }
});

关键修正说明： #

• 添加循环遍历：用for循环遍历图片数组，确保每张图都能匹配到对应的Canvas元素
• 解决闭包陷阱：通过立即执行函数（IIFE）包裹单次循环的逻辑，保证每个图片加载回调都能捕获到当前循环的索引值
• 修正Canvas获取逻辑：先获取Canvas元素，再获取它的2D绘图上下文，而非错误地从div元素获取
• 初始化Canvas尺寸：显式设置Canvas的width和height属性，避免绘图时出现拉伸或模糊问题
• 添加错误排查：如果找不到对应ID的Canvas，会在控制台输出错误提示，方便快速定位问题

配套HTML结构示例： #

你需要在页面中提前创建对应数量的Canvas元素，比如：

<canvas id="canvas0"></canvas>
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
<canvas id="canvas3"></canvas>
<canvas id="canvas4"></canvas>

如果你的Canvas是嵌套在div中的，可调整Canvas获取逻辑如下：

var div = document.getElementById("div"+index);
var canvas = div.querySelector("canvas");

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