canvas复杂背景渐变的核心在于分层控制：底层氛围层（大范围低饱和径向/线性渐变）、中层结构层（带方向感线性渐变+纹理）、顶层强调层（小范围高对比局部渐变），配合动态坐标绑定、混合模式融合及渐变对象复用优化性能。
Canvas 绘制复杂背景渐变，核心不在“堆颜色”，而在“控层次”——通过多层渐变叠加、透明度调节和坐标对齐，实现有纵深、有节奏、有呼吸感的视觉背景。关键不是画得更多，而是每层职责清晰、互不干扰。
分层设计：明确每层的视觉角色
复杂渐变背景通常拆解为 3 类基础层：
- 底层氛围层：用大范围、低饱和、高透明度的径向或线性渐变，模拟环境光或空间深度（如从画布中心发散的浅灰→透明）；
- 中层结构层：带方向感的线性渐变（如左上→右下），稍高饱和，用于定义主视觉流向，可叠加轻微噪点或微弱纹理；
-
顶层强调层：小范围、高对比的局部渐变（如按钮区域或焦点区的亮色线性渐变），常配合
globalAlpha或compositeOperation精准控制覆盖效果。
坐标与尺寸必须动态绑定
多层渐变一旦脱离当前 canvas 实际尺寸，就会错位、拉伸或偏移。尤其在响应式场景下：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 每次重绘前，先调用
resizeCanvas()同步canvas.width和canvas.height； - 所有
createLinearGradient(x0, y0, x1, y1)的坐标都基于当前宽高计算，例如：ctx.createLinearGradient(0, 0, canvas.width, canvas.height)（全画布对角渐变）； - 避免使用固定像素值（如
createLinearGradient(0, 0, 800, 600)），除非 canvas 尺寸完全固定。
混合模式让层与层真正“融合”
单纯叠放两层 fillRect 会丢失层次感。用 globalCompositeOperation 可实现专业级混合：
-
ctx.globalCompositeOperation = 'overlay'：增强对比，适合中层+底层组合，让暗部更沉、亮部更透； -
ctx.globalCompositeOperation = 'soft-light'：柔和叠加，适合强调层覆盖结构层，不生硬； -
ctx.globalCompositeOperation = 'source-over'（默认）：保持常规覆盖，建议仅用于底层绘制，之后切换模式再画上层； - 每次切换混合模式后，记得在该层绘制完成后重置为
'source-over'，防止影响后续图形。
性能与复用的平衡点
多层渐变不等于每帧都重建所有渐变对象：
- 底层氛围层若无动画，可只创建一次并缓存
CanvasGradient对象； - 中层/顶层若有位移、旋转或颜色变化动画，应在动画循环内重新创建渐变（因坐标或色标随时间变化）；
- 避免把
ctx.fillStyle = gradient写在初始化阶段——它会固化上下文状态，导致后续 fill 意外使用旧渐变； - 调试时可用
ctx.strokeStyle = 'red'; ctx.beginPath(); ctx.moveTo(x0,y0); ctx.lineTo(x1,y1); ctx.stroke()快速验证每层渐变轴线是否按预期方向延伸。
