canvas 无原生图层，但可通过 globalcompositeoperation 实现类似 photoshop 的像素级混合效果；需按序绘制并设置混合模式（如 multiply、screen），其作用于新旧像素间，一次性生效，不修改已绘内容。
基础用法：两图叠加实现常见混合效果
把两张图片先后画到 canvas 上，在画第二张前设置混合模式：
- 先用
drawImage(img1, 0, 0)绘制底图 - 再设
ctx.globalCompositeOperation = 'multiply' - 接着
drawImage(img2, 0, 0)绘制上层图 - 完成后可重置为
'source-over'避免影响后续绘制
常用混合模式及其视觉表现
这些值直接对应设计师熟悉的术语，但行为由浏览器按固定公式计算：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- multiply：正片叠底，颜色变暗，适合阴影或压暗局部
- screen：滤色，颜色变亮，适合高光或发光叠加
- overlay：叠加，保留对比度，暗区乘、亮区滤色
- lighten / darken：只保留更亮/更暗的像素，适合蒙版筛选
- destination-over：让新图形画在已有内容下方（反向堆叠）
- source-in：只在原图不透明区域显示新图形，常用于着色蒙版
注意事项：不是所有模式都全平台可用
部分高级模式如 color-burn、hard-light 在 Safari 中支持不完整，生产环境建议降级处理或用 JS 手动模拟。
- 每次设置后仅对后续绘制生效，不会修改已画内容
- 混合发生在像素级，但不支持渐变过渡、边缘羽化等“无缝融合”需求
- 若需真正可控的像素融合（如重叠区域线性插值），必须用
getImageData+ 循环计算 +putImageData
替代方案：CSS 或 SVG 更轻量的场景
如果只是让两个 <img> 元素视觉上混合，且布局允许重叠：
- 用
mix-blend-mode: multiply等 CSS 属性，更简单、可硬件加速 - 注意 stacking context 限制：父容器不能有
transform、isolation: isolate - SVG 的
<feblend></feblend>提供更多控制，但 DOM 开销大，适合静态复杂合成
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
