html5 canvas 多图层渲染本质是 javascript 模拟：可用多个离屏 canvas 构建物理图层栈，或单 canvas 内通过 save/restore、globalalpha 等实现逻辑图层；需统一坐标映射、脏矩形优化与 dpi 适配。
HTML5 Canvas 本身没有图层概念，所谓“多图层叠加的复杂渲染”，本质是用 JavaScript 模拟图层行为，靠结构设计、状态管理与合成策略协同实现。核心不在 Canvas 多少个，而在如何让不同内容按需隔离、独立更新、精准叠加。
用多个离屏 Canvas 构建物理图层栈
这是最稳定、易调试、适合中高复杂度场景的方式：每个图层对应一个独立的 <canvas></canvas> 元素（非 DOM 叠放，而是离屏 Canvas 对象），统一尺寸，不插入文档流，仅用于绘制和缓存。
- 创建时用
document.createElement('canvas')，设置宽高匹配主画布，不设样式 - 把图层实例存入数组（如
layers = [bgLayer, objLayer, effectLayer]），顺序即渲染顺序 - 每层只负责自身内容：背景层只画网格和底色，对象层只画可拖拽节点，特效层只画粒子或高光
- 主画布渲染时，遍历数组，对每个可见图层调用
ctx.drawImage(layer.canvas, 0, 0) - 支持运行时增删图层、切换
visible、调整opacity或blendMode，无需重写逻辑
在单 Canvas 内通过状态隔离模拟逻辑图层
适合轻量级应用或需严格像素对齐的场景。不新建 Canvas，而靠上下文保存与函数封装，在同一画布上分区域、分阶段绘制。
- 为每类内容写独立绘制函数（如
drawGrid()、drawNodes()、drawSelection()） - 每次绘制前调用
ctx.save()，结束后调用ctx.restore()，避免样式/变换污染 - 用
ctx.globalAlpha控制当前“图层”整体透明度，用ctx.globalCompositeOperation切换混合模式（如'multiply'做阴影，'lighter'做光效） - 局部刷新时，先用
ctx.clearRect(x, y, w, h)清除目标区域，再重绘对应函数，避免全屏重绘 - 图层元数据（id、visible、zIndex、tickRate）统一存在配置对象中，便于动态调度
坐标映射与交互层分离是复杂渲染的前提
图层一多，鼠标事件就容易错位。必须把“用户看到的位置”准确转成“对应图层内部坐标”。
- 监听主画布的
mousemove，用getBoundingClientRect()获取相对于视口的坐标 - 减去主画布左上角偏移，再除以当前缩放比例（如有 zoom），得到归一化坐标
- 若某图层有平移/旋转/缩放等变换，需反向应用其矩阵，才能定位到该图层 Canvas 内部像素位置
- 建议将交互逻辑（选中、拖拽、画笔）绑定到特定图层，其他图层设为
pointer-events: none或跳过命中检测 - 命中检测可用
ctx.isPointInPath()或简单包围盒判断，避免逐像素扫描
性能关键：脏矩形 + 指令快照 + DPI 适配
复杂渲染最怕卡顿。优化不是加硬件，而是减少无效计算。
- 只重绘变化区域：记录每个图层的“脏矩形”（
{x, y, width, height}），渲染时仅清空并重绘这些区域 - 操作可撤销？把绘制指令（如“在(120,80)画圆半径20”）存为 JSON 对象，而非直接画像素，回滚时重放即可
- 高清屏适配：用
window.devicePixelRatio放大 canvas 的width/height属性，再用 CSS 缩放回显示尺寸，避免模糊 - 避免频繁读取 canvas 像素（
getImageData），它会触发 GPU 同步，大幅拖慢帧率 - 动画帧用
requestAnimationFrame统一调度，不同图层按需更新（如背景层每秒更新1次，交互层60fps）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
