必须避免在<td>中直接嵌套<canvas>，因其与表格的padding、border、box-sizing等样式及Canvas的width/height属性存在底层冲突，易导致文字偏移、滚动裁切、打印空白和性能崩塌。
直接在 <td> 里放 <canvas> 绘制趋势图，90% 的项目会掉进布局错位、文字截断、滚动失步、性能崩塌这四个坑——这不是配置问题，是 DOM + Canvas 混用的底层矛盾。
为什么 <td><canvas></td> 必须避免
表格单元格有 padding、border、box-sizing、font-size 自动计算，而 <canvas> 的 width/height 属性和 CSS width/height 是两套系统。常见错误现象包括：
-
ctx.fillText()文字始终偏移 2–3 像素，调getBoundingClientRect()也对不准 - 横向滚动后，Canvas 内走势图突然被裁掉左半边
- 打印时所有 Canvas 区域空白，或只显示缩略图
- 50 行 × 8 列表格 → 400 个
<canvas>实例，内存占用飙升，requestAnimationFrame开始掉帧
用单个 <canvas> 模拟表格的坐标映射法
核心是放弃 HTML 表格的 DOM 结构，把整张表当作一个绘图区域，每个“单元格”只是逻辑坐标块。关键步骤：
- 先定义统一网格：
cellWidth = 120，cellHeight = 60，表头行高单独设为40 - 对第
i行第j列需绘图的单元格，计算左上角：x = j * cellWidth，y = i * cellHeight - 传入
drawTrend(ctx, x, y, width, height, data)，其中width和height要减去至少4像素内边距，防止文字溢出 -
data必须是纯数值数组（如[23, 45, 32, 56]），null或undefined必须提前过滤，否则lineTo(NaN, NaN)会让整条路径失效
drawTrend 函数必须处理的三件事
这个函数不操作 DOM，只做 Canvas 绘图，但漏掉任一细节都会导致视觉异常：
立即学习“前端免费学习笔记（深入）”；
- 每次调用前必须
ctx.beginPath()，否则多次绘制会累积路径，出现意外连线 - 纵轴归一化必须用当前单元格数据的
Math.min(...data)和Math.max(...data)，不能复用全局极值，否则小范围波动图变成一条横线 - 折线图结尾要显式调用
ctx.stroke()；如果加了阴影或渐变，还得提前ctx.save()/ctx.restore()隔离状态
真正难的不是画线，而是让每个“单元格区域”的坐标、文字、刻度、数据映射全部对齐——Canvas 不会自动帮你对齐表格字体 baseline，也不会感知 em 单位，所有偏移都得手动算像素。一旦表格列宽动态变化或支持响应式，这套坐标映射就得重写边界逻辑。
