单个HTML表单中双Canvas签名区域仅第二个可用的技术问题求助

你的问题根源在于全局变量被重复覆盖，以及所有签名逻辑共享了同一组全局状态，导致只有最后一个Canvas能正常工作。让我们一步步修复这个问题：

问题分析 #

1. 你重复声明了canvas、ctx、drawing等变量，后面的赋值直接覆盖了前面的，所以代码里最终只有signature2对应的Canvas被保留了引用。
2. start、stop、draw函数依赖全局的canvas和ctx，所以无论操作哪个Canvas，实际都是在修改第二个的内容。
3. stop函数里硬编码了signature.value = canvas.toDataURL()，只能更新第一个隐藏域，但对应的Canvas已经被覆盖了。

修复方案：用工厂函数创建独立的签名实例 #

我们可以把每个签名区域的逻辑封装成一个独立的初始化函数，这样每个Canvas都会拥有自己的状态变量和事件处理函数，互不干扰。

修改后的完整代码 #

HTML（修正了原代码未闭合的form标签）

<form method="post">
  <input type="hidden" name="command" value="submit">
  <div>
    <input name="name" placeholder="Your name" />
  </div>
  <div>
    <canvas id="signature" width="300" height="100"></canvas>
  </div>
  <div>
    <input type="hidden" name="signature" />
  </div>
  <div>
    <canvas id="signature2" width="300" height="100"></canvas>
  </div>
  <div>
    <input type="hidden" name="signature2" />
  </div>
  <input type="submit" value="submit">
</form>

CSS（保持原样式不变）

canvas#signature {
  border: 2px solid black;
}
canvas#signature2 {
  border: 2px solid black;
}
form>* {
  margin: 10px;
}

JavaScript（核心逻辑重构）

// 封装签名初始化函数，每个Canvas调用一次，实现状态隔离
function initSignature(canvasId, hiddenInputName) {
  const canvas = document.getElementById(canvasId);
  const ctx = canvas.getContext("2d");
  let drawing = false;
  let prevX, prevY;
  let currX, currY;
  const hiddenInput = document.getElementsByName(hiddenInputName)[0];

  // 内部定义事件处理函数，通过闭包保存当前Canvas的专属状态
  function start(e) {
    drawing = true;
    // 记录初始坐标，避免点击时出现空白线条
    const clientX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
    const clientY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;
    prevX = clientX - canvas.offsetLeft;
    prevY = clientY - canvas.offsetTop;
  }

  function stop() {
    drawing = false;
    prevX = prevY = null;
    // 将当前Canvas的签名内容存入对应隐藏输入框
    hiddenInput.value = canvas.toDataURL();
  }

  function draw(e) {
    if (!drawing) return;

    const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
    const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
    currX = clientX - canvas.offsetLeft;
    currY = clientY - canvas.offsetTop;

    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();

    prevX = currX;
    prevY = currY;
  }

  // 绑定鼠标事件
  canvas.addEventListener("mousedown", start);
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("mouseup", stop);
  canvas.addEventListener("mouseleave", stop); // 鼠标离开Canvas时停止绘制

  // 绑定触摸事件，适配移动端
  canvas.addEventListener("touchstart", start);
  canvas.addEventListener("touchmove", draw);
  canvas.addEventListener("touchend", stop);
  canvas.addEventListener("touchmove", (e) => e.preventDefault()); // 阻止触摸时页面滚动
}

// 初始化两个独立的签名区域
initSignature('signature', 'signature');
initSignature('signature2', 'signature2');

关键改进点 #

• 闭包隔离状态：每个签名区域的canvas、ctx、drawing等变量都被封装在initSignature函数的作用域内，完全避免了变量覆盖问题。
• 独立事件处理：每个Canvas的事件处理函数都是专属创建的，只会操作当前对应的Canvas和隐藏输入框。
• 完善交互体验：补充了鼠标离开Canvas时的停止逻辑，以及完整的触摸事件支持，同时阻止触摸时的页面滚动。
• 修复绘制bug：在start函数中直接记录初始坐标，解决了原代码中点击Canvas可能出现空白线条的问题。

这样修改后，两个Canvas就能各自独立接收签名绘制，并且各自的内容会正确存入对应的隐藏输入域中。

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