HTML5中Canvas中Z-Index逻辑在2D环境下的模拟

Canvas无z-index，仅靠绘图顺序模拟层叠：先绘在后绘之下；应按z属性升序排序对象后依次绘制，文字、透明度等需统一纳入排序；多canvas叠加属DOM层，非真正z-index。

Canvas 并不存在 z-index 概念：作为一块位图画布，它会按照代码执行次序，将全部绘制操作覆盖到同一平面缓冲区。所谓“z-index 模拟”，实质上是控制绘图顺序，使后画内容在视觉上位于前方、先画内容处于后方，以此形成层叠效果。

绘制次序就是 Z 轴次序

Canvas 的 2D 渲染上下文（ctx）既不维护对象树，也不保存图层栈，只负责维护一个像素缓冲区。因此：

• 先调用 ctx.fillRect(0,0,100,100)（绘制红方块），然后调用 ctx.fillRect(50,50,100,100)（绘制蓝方块），红方块的右下部分会被蓝方块覆盖，因此蓝方块在视觉上“更靠前”
• 交换这两行的执行次序后，蓝方块的对应区域就会被红方块覆盖
• 在 Canvas 中实现 z-index，唯一可靠的依据就是“后绘制的内容位于上方”这条规则

手动维护绘制层级（推荐方式）

建议先依据 z 值对待绘制对象进行分组或排序，从而清楚地控制 z 序：

• 为每个图形或对象添加 z 属性（例如 {x:10, y:20, width:50, z:2}）
• 渲染前，用 Array.sort((a,b) => a.z - b.z) 升序排列（z 小的先画，z 大的后画）
• 按照排序结果遍历数组，并依次调用 ctx.fillRect()、ctx.drawImage() 等
• 需要注意，文字、阴影和透明度（globalAlpha）同样会受到绘制次序影响，因此都要纳入统一的排序逻辑

不要用 DOM 层叠代替 Canvas 内部层级逻辑

有些人会尝试使用多个 <canvas> 元素，并通过 CSS 设置 z-index 进行“分层模拟”，但这种方式属于 DOM 层面的叠加，并非 Canvas 2D 上下文内部的 z-index：

立即学习“前端免费学习笔记（深入）”；

• 使用多个 canvas 会产生额外的合成开销，还可能带来缩放与坐标对齐问题，并使事件坐标换算更加复杂
• 跨 canvas 的混合无法实现，例如半透明对象叠加、裁剪和滤镜等
• 若不存在 UI 层与游戏层分离等特殊需求，应当优先采用单 canvas，并通过绘制顺序维护层级

特殊情形：保存或恢复状态以及裁剪都不会影响 z 顺序

ctx.clip() 和 ctx.save()/ctx.restore() 负责控制绘制范围和样式状态，但不会改变像素的写入次序：

• 即便你 save → clip → fill → restore，该 fill 的覆盖关系依然由它在代码中的出现位置决定
• 裁剪仅限定“可以画到什么位置”，并不会创建新的图层
• 若希望某个元素“始终位于最上方”，就应把它安排在全部 draw 调用之后