不能直接在HTML表格单元格中嵌入Canvas绘制走势图，因Canvas是独立绘图表面，需放入<td>后手动对齐缩放，易导致文字错位、截断、比例失真等问题；推荐用单个Canvas模拟表格，通过坐标映射在每个单元格区域内绘制走势图。
不能直接在 HTML 表格单元格（<td>）里“嵌入” Canvas 来绘制走势图——Canvas 是独立绘图表面，不是表格内容的一部分。真正在单元格内画图，得把 Canvas 元素放进 <td>，再手动对齐、缩放、绑定数据。但这样做极易出错，且性能差、响应难、文本不可选。
为什么不能用 <td><canvas></td> 直接画走势图
常见错误现象：ctx.fillText 文字错位、走势图被截断、resize 后比例失真、滚动时 Canvas 错位、打印无内容。
- HTML 表格会自动计算
<td>尺寸并应用 padding/border/box-sizing，Canvas 的width/height属性与 CSSwidth/height不同步，导致像素模糊或拉伸 -
position: relative或display: inline-block容易让 Canvas 脱离单元格布局流，getBoundingClientRect()返回坐标不可靠 - 每单元格一个 Canvas → DOM 节点爆炸式增长，50 行 × 10 列 = 500 个 Canvas 实例，内存和重绘开销远超必要
推荐做法：用单个 Canvas 模拟表格 + 单元格级坐标映射
核心思路是放弃 HTML 表格 DOM 结构，用 Canvas 自绘整个表格区域，把“走势图”作为每个单元格内的局部子图绘制。这样既保持像素级控制，又避免 DOM 干扰。
- 先定义统一网格：比如
cellWidth = 120,cellHeight = 60，表头行高可单独设为40 - 对每个需走势图的单元格（如第
i行第j列），计算其左上角坐标：x = j * cellWidth,y = i * cellHeight - 在该坐标区域内调用自定义函数（如
drawTrend(ctx, x, y, width, height, data)），只在这个矩形范围内画折线/柱状/面积图 - 数据映射要归一化：用
Math.min/max算出当前单元格数据的minVal/maxVal，再线性映射到0~height像素空间
drawTrend 函数关键参数与避坑点
这个函数不依赖外部 DOM，纯 Canvas 绘图逻辑，但必须处理好三件事：
立即学习“前端免费学习笔记（深入）”；
-
data必须是数值数组（如[23, 45, 32, 56]），空值或null要提前过滤，否则NaN导致lineTo坐标失效 -
width和height是可用绘图区域（已扣除内边距），别直接用cellWidth/cellHeight，留出至少4px边距防文字溢出 - 必须手动调用
ctx.beginPath()开始路径，否则多次调用会累积路径，造成意外连线；结束后用ctx.closePath()或不闭合均可，但别漏ctx.stroke() - 如果走势图需要颜色渐变（如上升绿、下降红），用
ctx.createLinearGradient(x0,y0,x1,y1)，起点终点必须落在当前单元格坐标系内，别用绝对画布坐标
动态更新时最容易忽略的细节
表格数据变、走势图就得重绘，但很多人只清空局部区域，结果旧图残影叠加：
- 不要只
clearRect(x, y, width, height)—— 这会擦掉边框和相邻单元格文字，正确做法是重绘整行或整表 - 若仅更新某几个单元格，应记录其行列索引，在
drawTable()中跳过未变更的单元格，但必须保证边框绘制逻辑仍覆盖全部网格线 - 高频刷新（如每秒更新）时，
requestAnimationFrame必须配ctx.clearRect(0, 0, canvas.width, canvas.height)全局清空，局部擦除反而更慢 - 设备像素比（
window.devicePixelRatio）必须在初始化时读取并缩放 Canvas 物理尺寸，否则高清屏下走势图发虚，且不能靠 CSS 缩放补救
