Canvas 不支持数据绑定，需手动映射数据到像素坐标并调用绘图API；所有绘制必须通过 ctx = canvas.getContext('2d') 获取上下文，且需每次重置关键状态（如 beginPath、clearRect）并手动处理坐标缩放、Y轴翻转与边界检查。
Canvas 本身不提供“绑定数据”功能，所谓“绑定图表”其实是用 JavaScript 手动把数据映射到坐标、再调用绘图 API 渲染——没有自动响应式更新，也没有声明式语法。
canvas.getContext('2d') 是唯一入口，别绕开它
所有绘制都依赖这个上下文对象，漏掉这步或重复获取会导致状态丢失、样式错乱。常见错误包括：
- 在
resize事件里只改了canvas.width/canvas.height，但没重新获取ctx（其实不用重取，但必须重置样式和路径） - 多个函数共用一个
ctx却忘记每次开头调用ctx.beginPath()，导致线条意外连接 - 误以为
ctx.fillStyle是全局设置，实际它只影响后续的fill()或fillRect()，不继承也不缓存
正确做法是：获取一次 ctx 后全程复用，并在每次绘图逻辑开始前明确重置关键状态，比如：
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.strokeStyle = '#333'; ctx.lineWidth = 1.5;
数据 → 像素坐标的映射必须手动写，不能跳过
Canvas 没有内置坐标系转换，[0, 100] 的温度值不会自动变成画布上的 y=200。你得自己算缩放比例和偏移量。典型步骤：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 确定绘图区域：减去左右/上下边距，得到可用宽高（例如
width = canvas.width - 80） - 算 X/Y 方向缩放因子：
xScale = width / (maxX - minX)，yScale = height / (maxY - minY) - 注意 Y 轴翻转：Canvas 原点在左上角，所以真实
yPixel = canvas.height - bottom - (value - minY) * yScale - 边界检查：确保算出的像素坐标不越界（尤其当数据为空或全为 NaN 时）
示例：若数据是 [25, 30, 28, 32]，想铺满高度为 200px 的区域（下边距 40px），则：
const minY = 25, maxY = 32;
const yScale = 200 / (maxY - minY);
data.forEach((val, i) => {
const y = canvas.height - 40 - (val - minY) * yScale;
ctx.fillRect(i * 40 + 60, y, 30, canvas.height - 40 - y);
});
动态更新图表要清画布+重绘，不是“刷新绑定”
没有类似 Vue 的 v-model 或 React 的 state 触发重渲染。每次数据变，你必须显式执行三件事：
- 调用
ctx.clearRect()清除旧内容（仅清指定区域更高效） - 重新计算所有像素坐标（哪怕只改了一个点）
- 按顺序调用
fillRect()、stroke()等完成新帧
容易踩的坑：
- 用
display: none隐藏 canvas 再显示，会导致画布重置（内容丢失） - 在动画循环中反复创建
new Path2D()却不复用，增加 GC 压力 - 直接修改数组引用（如
data.push(newVal)）却不触发重绘逻辑，画面就卡在旧状态
简单轮播更新可这样组织：
function updateChart(newData) {
data = newData;
draw(); // 完整重绘函数
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ... 坐标计算 + 绘图调用
}
真正难的从来不是画一根线，而是把数据范围、缩放、文字对齐、抗锯齿、高 DPI 适配这些细节全串起来还不崩——尤其当你要支持拖拽缩放或悬停提示时，坐标反查比正向映射还容易出错。
