两个输入框对应两个Canvas文本同步显示异常问题求助

看起来你遇到的核心问题是第二个输入框的文本没有绑定实时更新的事件监听，只有当触发颜色修改时才会重新绘制Canvas内容，所以输入文本时看不到变化。下面是具体的修复步骤和代码调整方案：

问题根源 #

你的代码里仅给第一个输入框绑定了input事件来触发文本绘制，但第二个输入框没有对应的事件绑定逻辑。而颜色修改函数会重新绘制两个Canvas的内容，所以只有点击颜色按钮时，第二个输入框的文本才会被渲染出来。

修复方案 #

1. 统一文本更新函数，支持多Canvas #

首先重构文本更新函数，让它可以接收目标Canvas、上下文和输入框元素作为参数，这样可以复用逻辑处理两个Canvas：

function updateText(targetCanvas, targetCtx, inputElement) {
  const text = inputElement.value;
  let fontSize = 40; // 初始字号
  targetCtx.font = `${fontSize}px ${currentFont}`;

  // 自适应字号：文本宽度超过Canvas内边距时缩小字号
  while (targetCtx.measureText(text).width > targetCanvas.width - 20 && fontSize > 10) {
    fontSize--;
    targetCtx.font = `${fontSize}px ${currentFont}`;
  }

  // 清空画布并绘制文本
  targetCtx.clearRect(0, 0, targetCanvas.width, targetCanvas.height);
  targetCtx.fillStyle = currentColor;
  targetCtx.textAlign = 'center';
  targetCtx.textBaseline = 'middle';
  targetCtx.fillText(text, targetCanvas.width / 2, targetCanvas.height / 2);
}

2. 给第二个输入框绑定输入事件 #

在初始化代码中，给第二个输入框也添加input事件监听，触发对应的文本更新：

// 第一个输入框监听
document.getElementById('textInput1').addEventListener('input', () => {
  updateText(canvas1, ctx1, document.getElementById('textInput1'));
});

// 第二个输入框监听（新增）
document.getElementById('textInput2').addEventListener('input', () => {
  updateText(canvas2, ctx2, document.getElementById('textInput2'));
});

3. 调整颜色修改函数，同步更新两个Canvas #

修改颜色切换函数，确保颜色变化时两个Canvas的文本都会重新渲染：

function changeColor(color) {
  currentColor = color;
  // 同时更新两个Canvas的文本
  updateText(canvas1, ctx1, document.getElementById('textInput1'));
  updateText(canvas2, ctx2, document.getElementById('textInput2'));
}

4. 字体修改函数同理（可选优化） #

如果你的字体修改函数也存在类似问题，同样需要同步更新两个Canvas：

function changeFont(font) {
  currentFont = font;
  updateText(canvas1, ctx1, document.getElementById('textInput1'));
  updateText(canvas2, ctx2, document.getElementById('textInput2'));
}

效果验证 #

完成以上修改后，两个输入框的文本都会在输入时实时渲染到对应的Canvas中，同时颜色和字体修改也会同步作用于两个Canvas，完美解决你遇到的同步问题。

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