HTML5 Canvas随动态表格下移后绘制内容不显示问题求助

看起来你遇到的核心问题不是Canvas被挤压本身，而是鼠标位置的计算逻辑错误——当Canvas随表格下移后，你绘制的内容实际上不在Canvas的可视区域内（代码确实在执行绘制，但位置偏移到了Canvas外面）。让我一步步帮你解决：

问题根源分析 #

你用position: absolute把Canvas固定在顶部时能正常绘制，是因为此时Canvas的视口偏移量（相对于屏幕左上角）是固定的；但当Canvas正常流在表格下方时，它的视口偏移量（offsetX/offsetY）会随表格高度变化而改变，而你原来的getPositionXY函数里混用了offsetLeft/offsetTop（相对于父元素）和offsetX/offsetY（相对于视口），导致鼠标坐标计算错误，绘制的内容“跑”到了Canvas外面。

解决方案 #

1. 修正鼠标坐标计算逻辑 #

你的reOffset函数已经通过getBoundingClientRect()获取了正确的视口偏移量，直接用它来计算Canvas内部坐标即可，不需要复杂的三元判断。修改getPositionXY函数：

function getPositionXY(mouse, e) {
  if (mouse == 'down') {
    prevX = currX;
    prevY = currY;
    // 直接用reOffset里的offsetX/offsetY计算Canvas内部坐标
    currX = e.clientX - offsetX;
    currY = e.clientY - offsetY;
    flag = true;
    dot_draw = true;
    if (dot_draw) {
      context.textBaseline = "hanging";
      context.beginPath();
      context.fillStyle = font_color;
      context.arc(currX, currY, 2, 0, 2 * Math.PI);
      context.fill(); // 补上之前遗漏的填充逻辑，否则点击不会显示圆点
      context.closePath();
      dot_draw = false;
    }
  }
  if (mouse == 'up' || mouse == "out") {
    flag = false;
  }
  if (mouse == 'move') {
    if (flag) {
      prevX = currX;
      prevY = currY;
      currX = e.clientX - offsetX;
      currY = e.clientY - offsetY;
      draw();
    }
  }
}

2. 修复未定义的变量 #

代码里用到了font_size但没有声明，这会导致绘制时线条宽度为undefined，在变量声明部分补上：

// 变量声明区域添加
var font_color = "black";
var font_size = 2; // 可根据需求调整线条粗细

3. 调整布局样式 #

去掉Canvas的绝对定位，让它正常跟随表格布局：

/* 删除原来的绝对定位样式，保留边框即可 */
canvas { border:1px solid; }

这样修改后，当表格动态变长时，Canvas会自然下移，而reOffset函数会在窗口滚动/resize时重新计算Canvas的视口偏移量，确保鼠标坐标始终对应Canvas内部的正确位置，绘制的内容就能正常显示了。

内容的提问来源于stack exchange，提问作者Wanabe Super Coder