Canvas无内置图层，多图层通过多canvas元素叠放或单canvas内状态隔离实现；核心是绘制顺序控制、上下文隔离与视觉合成；分Canvas图层适合动态更新，单Canvas图层依赖save/restore和函数封装；需图层元数据管理与性能优化。
Canvas 本身没有内置图层概念，所谓“多图层叠加”是通过多个 <canvas></canvas> 元素按 DOM 层级叠放，或单个 canvas 内部用绘图状态隔离、分区域绘制来模拟实现的。核心逻辑在于**绘制顺序控制 + 绘图上下文隔离 + 视觉合成管理**。
分 Canvas 图层：物理隔离，适合动态频繁更新的场景
每个图层对应一个独立的 <canvas></canvas> 元素，统一尺寸，绝对定位重叠。DOM 层级（z-index）决定渲染顺序，底层 canvas 绘制背景/静态内容，上层绘制交互元素或动画。
- 优点：图层间互不干扰，可单独清空、重绘、隐藏（
display: none）、缩放或导出 - 建议：用容器 div 包裹所有 canvas，统一设置宽高和 position: relative；各 canvas 设置
position: absolute; top: 0; left: 0; - 示例结构：
单 Canvas 多图层逻辑：状态隔离 + 坐标空间管理
在单个 canvas 上模拟图层，依赖 ctx.save()/ctx.restore() 保存/恢复变换与样式状态，并通过函数封装不同“图层”的绘制逻辑。
- 关键做法：为每类内容定义绘制函数（如
drawBackground()、drawCharacters()、drawEffects()），严格按序调用 - 避免全局污染：不在函数内修改 ctx 的 fillStyle/strokeStyle 等属性，或每次使用前显式设置
- 支持局部刷新：用
ctx.clearRect(x, y, w, h)清除特定区域，再重绘该“图层”对应内容，而非全屏清空
图层元数据管理：让逻辑可维护、可扩展
用 JavaScript 对象描述图层行为，包括可见性、透明度、更新频率、绘制优先级等，形成可配置的图层栈。
立即学习“前端免费学习笔记（深入）”；
- 示例图层配置：
const layers = [
{ id: 'bg', visible: true, opacity: 1.0, update: drawBackground },
{ id: 'char', visible: true, opacity: 1.0, update: drawCharacters, tickRate: 60 },
{ id: 'ui', visible: true, opacity: 0.9, update: drawUI }
]; - 主渲染循环中遍历 layers，跳过
visible: false的项，按数组顺序绘制，用globalAlpha控制当前图层整体透明度 - 支持运行时增删图层、调整顺序、动态开关，便于调试与功能模块化
性能与合成优化要点
图层叠加易引发重绘开销，需针对性优化：
- 静态图层（如底图）可预先绘制到离屏 canvas（offscreen canvas），后续直接
drawImage(offlineCanvas, ...)复用 - 避免每帧重复创建路径或图像对象；缓存
ctx.createLinearGradient()等耗时资源 - 对高频更新图层（如粒子效果），限制绘制区域（
clip()）或启用硬件加速（will-change: transform配合 translateZ(0)） - 移动端注意 canvas 尺寸不要超过设备物理分辨率，否则触发缩放渲染，影响性能和清晰度
