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控制的是显示尺寸（逻辑像素）。两者不一致就会拉伸或模糊。

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

• 推荐做法：用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缩放画布）

不复杂但容易忽略。