// 第 5 周的阴影泄漏现场：
ctx.shadowColor = "rgba(0,255,136,0.8)";
ctx.shadowBlur = 20;
ctx.fillRect(100, 100, 80, 80);     // 这个方块带光晕 ✅

ctx.fillRect(300, 100, 80, 80);     // ❌ 这个也带光晕！阴影是"粘"在 ctx 上的

┌────────────────────────────────────┐
│  ctx（画师的工作台）                  │
│                                    │
│  当前颜料: fillStyle = "#00ff88"    │  ← 只有一份！
│  当前笔刷: lineWidth = 4            │  ← 只有一份！
│  当前特效: shadowBlur = 20          │  ← 只有一份！
│  当前坐标变换: (平移/旋转/缩放)      │  ← 只有一份！
│  当前合成模式: source-over          │  ← 只有一份！
└────────────────────────────────────┘

任何绘制 API（fill/stroke/fillText...）都读取这"一份"状态。
改了状态，后面所有绘制全部受影响 —— 这就是泄漏的根源。

ctx.save();          // ① 把当前全部状态"拍照"，压入栈（画面内容不受影响！）

ctx.shadowColor = "rgba(0,255,136,0.8)";   // ② 随便改状态
ctx.shadowBlur = 20;
ctx.fillStyle = "#00ff88";
ctx.translate(100, 100);
ctx.rotate(Math.PI / 6);

ctx.fillRect(0, 0, 80, 80);                 // ③ 用改过的状态画

ctx.restore();        // ④ 弹栈：状态瞬间回到拍照那一刻
                      //    阴影没了、fillStyle 复原、变换也复原！

ctx.fillRect(300, 100, 80, 80);   // ⑤ 正常方块，无污染 ✅

// ⚠ 最常见的误解：以为 save 能撤销绘制内容
ctx.save();
ctx.fillRect(0, 0, 100, 100);   // 画了一个方块
ctx.restore();
// ❌ 方块还在！restore 不清画面 —— 撤销画面要用 ImageData 快照（Day 35 画板的做法）

ctx.save();     // 栈：[快照A]
ctx.save();     // 栈：[快照A, 快照B]
ctx.restore();  // 弹出 B → 回到 B 时刻   栈：[快照A]
ctx.restore();  // 弹出 A → 回到 A 时刻   栈：[]
ctx.restore();  // ⚠ 空栈上 restore：静默失败（不报错，但也什么都不做）

// 画布内容（像素）—— 管理它用 ImageData（Day 39）
// canvas.width / canvas.height —— DOM 属性
// 当前路径（beginPath 开始的那张"草稿纸"）—— ⚠ 这是个坑！见第七节坑 3

// 绘制一个"在大场景变换中自转的设备"：
ctx.save();                          // ── 第 1 层：场景变换开始
  ctx.translate(sceneX, sceneY);     //    场景平移
  ctx.scale(sceneZoom, sceneZoom);   //    场景缩放

  ctx.save();                        // ── 第 2 层：设备自身变换开始
    ctx.translate(devX, devY);       //    设备在场景中的位置
    ctx.rotate(devAngle);            //    设备自转

    ctx.save();                      // ── 第 3 层：报警灯特效开始
      ctx.globalAlpha = pulse;       //    闪烁透明度
      ctx.fillStyle = "#ff4d4f";
      ctx.beginPath();
      ctx.arc(0, 0, 6, 0, Math.PI * 2);
      ctx.fill();                    //    画报警灯
    ctx.restore();                   // ── 第 3 层结束：透明度复原

    ctx.fillStyle = "#4a6fa5";       //    设备本体不受闪烁影响
    ctx.fillRect(-15, -15, 30, 30);  //    画设备方块（仍在旋转中）

  ctx.restore();                     // ── 第 2 层结束：设备角度复原

  drawPipe(ctx);                     //    画管线（只受场景变换影响，不受设备自转影响）

ctx.restore();                       // ── 第 1 层结束：场景变换复原

第 1 层变换：平移(100,100) + 缩放(2)
第 2 层变换：旋转(45°)

实际画报警灯时的总变换 = 场景变换 ∘ 设备变换 ∘ 灯特效
（矩阵复合：效果层层相乘 —— 明天 Day 37/38 展开）

save/restore 的作用 = 保证每层结束后"卸掉"自己加的变换，
                      不会泄漏到兄弟节点。

// day36-windmill.ts —— 三层嵌套 save/restore 的旋转风车
import { bootCanvas } from "../day29/canvas-boot.js";

const { ctx, cssWidth, cssHeight } = bootCanvas(document.querySelector("#board")!);

const CX = cssWidth / 2;    // 风车中心
const CY = cssHeight / 2;
let angle = 0;              // 叶轮当前角度（弧度）

/** 绘制底座（静态，不在变换层里） */
function drawBase(): void {
  ctx.fillStyle = "#3a4a6a";
  ctx.beginPath();
  ctx.moveTo(CX - 10, CY);          // 三角形塔身的三个顶点
  ctx.lineTo(CX + 10, CY);
  ctx.lineTo(CX, CY + 120);
  ctx.closePath();
  ctx.fill();
}

/**
 * 绘制叶轮：一根叶片 = save → rotate(第 i 份角度) → 画叶片 → restore
 * 4 根叶片用同一份代码，只差旋转角 —— 这就是变换的复用威力
 */
function drawRotor(): void {
  const bladeColors = ["#00ff88", "#00c6ff", "#ffc53d", "#ff4d4f"];

  for (let i = 0; i < 4; i++) {
    ctx.save();                                  // ── 每根叶片独立的状态空间
      ctx.translate(CX, CY);                     // ① 坐标原点搬到风车中心
      ctx.rotate(angle + (Math.PI / 2) * i);     // ② 转到第 i 根叶片的朝向

      // 从这里开始：原点就是风车中心、x 轴指向叶片方向 —— 画叶片极简单
      ctx.save();                                // ── 叶片内的发光特效层
        ctx.shadowColor = bladeColors[i];        //   阴影颜色 = 叶片颜色
        ctx.shadowBlur = 15;
        ctx.fillStyle = bladeColors[i];
        ctx.beginPath();
        ctx.moveTo(0, 0);                        //   从中心出发
        ctx.lineTo(90, -12);                     //   叶片尖
        ctx.lineTo(90, 12);
        ctx.closePath();
        ctx.fill();                              //   一根带光晕的叶片
      ctx.restore();                             // ── 特效层结束（阴影关闭）

    ctx.restore();                               // ── 叶片层结束（变换复原）
  }

  // 中心轴（不受任何叶片变换影响，单独画）
  ctx.save();
  ctx.translate(CX, CY);
  ctx.fillStyle = "#e6f1ff";
  ctx.beginPath();
  ctx.arc(0, 0, 8, 0, Math.PI * 2);
  ctx.fill();
  ctx.restore();
}

// ===== 动画主循环（Day 34 套路）=====
let lastTime = performance.now();

function frame(now: number): void {
  const dt = Math.min((now - lastTime) / 1000, 0.05);
  lastTime = now;

  angle += Math.PI * 0.5 * dt;   // 每秒转 90°（角速度也是"每秒单位"，乘 dt）

  ctx.clearRect(0, 0, cssWidth, cssHeight);
  drawBase();
  drawRotor();

  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

frame（清屏）
├── drawBase：无变换，直接画
└── drawRotor
    ├── 叶片 i=0：save → translate+rotate → save → 阴影 → 画 → restore → restore
    ├── 叶片 i=1：同上（完全独立的变换空间）
    ├── 叶片 i=2、3：同上
    └── 中心轴：save → translate → 画 → restore

// 准则 1：涉及变换（translate/rotate/scale）→ 必须 save/restore（无替代方案）
// 准则 2：临时特效（阴影/合成模式/透明度）→ 优先 save/restore
// 准则 3：每帧热路径中重复上千次的单一属性切换 → 可用直接赋值
//          例：粒子系统里同色批量绘制，直接设置 fillStyle 反而快

// 第 5 周画板的 endStroke 手动复位 lineWidth —— 单属性，保留没问题 ✅
// 但它的 destination-out 恢复，用 save/restore 重写会更稳（见 Day 42 重构）

// 路径不归 save/restore 管：
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);

ctx.save();
ctx.translate(50, 50);
ctx.restore();

ctx.stroke();   // ⚠ 线画在 (0,0)→(100,100)——路径是 restore【之前】构建的坐标
                //    但 stroke 应用的是【当前】变换吗？——不！路径坐标在构建时就已确定
                //    （准确说：路径点是构建时经当时变换映射进用户空间的）
// 结论：要变换路径，必须"先变换、再建路径"，顺序不能反

ctx.fillStyle = "#ff0000";
ctx.save();
ctx.fillStyle = "#00ff00";
ctx.shadowBlur = 20;
ctx.save();
ctx.fillStyle = "#0000ff";
ctx.restore();
ctx.fillRect(10, 10, 50, 50);

ctx.save();
ctx.translate(100, 100);
ctx.rotate(0.3);
drawNeedle();
ctx.rotate(1.2);      // 想画第二根
drawNeedle();
ctx.restore();

Day 36 save/restore 状态栈
├── 本质
│   ├── ctx = 单份全局状态的画师
│   └── 泄漏根源：状态是"粘"的
├── 机制
│   ├── save：整组状态压栈（不含画面/路径！）
│   ├── restore：弹栈复原
│   └── LIFO：嵌套的正确性保证
├── 管理范围
│   ├── 样式类（fill/stroke/line/shadow/text）
│   ├── 行为类（globalAlpha/CompositeOperation/filter）
│   └── 变换矩阵 + 裁剪区域 ⭐（后面三天的安全带）
├── 嵌套实战
│   └── 风车：场景层 → 设备层 → 特效层
└── 选型
    ├── 变换 → 必用栈
    ├── 多属性临时特效 → 优先栈
    └── 热路径单属性 → 直接赋值