canvas 2d渲染是即时模式的像素级绘制，不保留图形对象，仅生成位图；需手动处理dpr以避免模糊，通过save/restore管理上下文状态，并用ispointinpath等方法实现手动拾取。
Canvas 2D渲染的核心机制是即时模式的像素级绘制，不保留图形对象，只保留最终的位图结果。它不依赖DOM结构，所有操作都通过JavaScript调用绘图API直接写入后备存储区（backing store），再由浏览器图形管线合成到屏幕。
位图驱动的即时渲染
Canvas本质是一块内存缓冲区，每次调用fillRect、fillText或drawImage等方法，都会立即把对应图形栅格化为像素，并写入该缓冲区。这个过程不可逆——画完就只是像素，没有“矩形对象”或“文字节点”的概念。
- 绘图命令不生成中间对象，也不触发重排重绘，性能开销集中在CPU计算与内存写入
- 修改画面必须主动清除（如
clearRect）再重绘，无法单独更新某个图形 - 放大缩小时易模糊，因底层是固定分辨率的位图，而非数学描述的矢量路径
逻辑像素与物理像素的映射关系
清晰显示的关键在于正确处理设备像素比（DPR）。Canvas的width/height属性定义的是画布的实际像素尺寸，而CSS中的width/height控制的是显示尺寸（逻辑像素）。两者不一致就会拉伸或模糊。
- 推荐做法：用
getBoundingClientRect()获取CSS尺寸，乘以window.devicePixelRatio，再赋值给Canvas的width/height属性 - 例如：画布在CSS中设为300×200px，DPR为2，则应设
canvas.width = 600、canvas.height = 400 - 之后用
ctx.scale(dpr, dpr)统一坐标系，使fillText(10,10)等逻辑坐标仍按CSS尺寸理解
上下文状态栈与绘制隔离
Canvas 2D上下文维护一套可保存/恢复的状态，包括变换矩阵、裁剪路径、填充样式、字体设置等。这使得局部绘制互不干扰。
-
ctx.save()保存当前全部状态，ctx.restore()回滚到最近一次保存点 - 常用于复杂图形叠加：比如旋转文字时先
save→rotate→fillText→restore，避免影响后续绘制 - 状态操作本身轻量，但频繁调用仍会带来微小开销，建议按需使用而非包裹每一行绘制代码
图形拾取与交互实现原理
Canvas本身不支持事件绑定到具体图形，交互需手动实现坐标判断：
-
isPointInPath()和isPointInStroke()可在当前路径上做命中检测，但需重新描一遍路径，适合图形较少（ - 更通用的做法是缓存每个图形的几何参数（如圆心+半径、矩形左上角+宽高），用纯数学公式判断点是否落在其范围内
- 鼠标事件坐标需转换为Canvas坐标系：减去画布左上角偏移，再除以DPR（若已按DPR缩放画布）
不复杂但容易忽略。
