Canvas绘图需确保DOM就绪、宽高属性与CSS一致、y轴翻转映射、每次重绘前清空画布；否则会出现错位、模糊、叠绘、倒置等问题。
Canvas 绘图不是“写完就跑”，而是要反复重绘、坐标对齐、状态清理；直接用 fillRect 画柱子或 arc 画饼图，不处理数据映射和坐标缩放，图表一定错位、压扁或文字溢出。
canvas.getContext('2d') 必须在 DOM 加载后调用
常见错误是脚本放在 里，document.getElementById 返回 null，接着 getContext('2d') 报 Cannot read property 'getContext' of null。浏览器不会自动等 DOM 就绪。
- 把 JS 放在
前，或用DOMContentLoaded包裹 - 别依赖 jQuery 的
$(document).ready()—— 纯 Canvas 项目没必要引入框架 - 检查
canvas元素是否真被渲染：打开 DevTools → Elements 标签页确认元素存在且width/height有值
width/height 属性与 CSS 尺寸必须匹配，否则图形模糊或拉伸
Canvas 是位图，它的绘图空间由 HTML width 和 height 属性决定；CSS width/height 只是缩放显示区域。两者不一致时，浏览器会插值重采样，导致线条发虚、文字锯齿、柱子边缘糊成一片。
- 正确写法：
+canvas { width: 600px; height: 400px; } - 响应式场景下，不要只改 CSS：需监听
resize，重新设置canvas.width和canvas.height（这会清空画布），再重绘 - 高 DPI 屏幕（如 Retina）需额外乘以
window.devicePixelRatio，否则图表看起来发虚
动态更新图表时，必须手动清空画布再重绘
Canvas 没有“刷新”或“重置视图”的概念，所有绘制操作都在像素层叠加。不主动清除，新柱子会叠在旧柱子上，坐标轴越画越粗，文字层层覆盖——最终变成一团黑。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 清空方法只有两种有效：
ctx.clearRect(0, 0, canvas.width, canvas.height)（推荐）或canvas.width = canvas.width（重置画布，同时清空状态） - 别用
ctx.fillStyle = 'white'; ctx.fillRect(...)模拟清屏——它只是盖一层白，不重置绘图状态（比如lineWidth、font还在） - 动画类图表（如实时折线图）每帧都必须清空 + 重绘，否则轨迹残留；但清空范围可以缩小（比如只清局部区域）来优化性能
数据到坐标的映射最容易漏掉 y 轴翻转
Canvas 坐标系原点在左上角，y 向下增长；而数学图表 y 向上增长。若直接把数据值当 y 坐标传给 fillRect(x, y, w, h)，柱子会从顶部往下“长”，甚至完全画到画布外。
- 柱状图高度计算公式应为：
y = chartHeight - (value / maxValue) * usableHeight - 折线图的点数组也要统一做 y 映射，否则
lineTo(x, y)画出来是倒的 - 留出边距（padding）再算可用区域，别拿
canvas.height直接当图表高度用 - 调试技巧：先画一个
ctx.fillRect(10, 10, 20, 20)确认坐标系方向，再动数据映射逻辑
真正卡住人的从来不是 API 不熟，而是坐标没对齐、画布没清空、尺寸没配对——这些细节不显眼，但一错全崩。动手前，先用固定数值画一根柱子、一条线、一个圆，验证坐标和缩放，比堆逻辑更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
