globalAlpha仅影响后续绘制内容的透明度，不改变canvas自身背景或已绘像素；需配合save/restore隔离作用域，避免污染后续绘图，且与rgba()颜色值叠加时透明度相乘。
Canvas 绘制半透明效果，globalAlpha 是最直接的全局控制方式，但它不是“调个透明度就完事”的简单开关——用对了省代码，用错了会连锁影响后续所有绘制。
globalAlpha 的真实作用范围
它只改变「新画上去的内容」的透明度，不影响 canvas 元素本身背景，也不影响已绘制好的像素。比如设 ctx.globalAlpha = 0.3 后画一个矩形，那个矩形变淡；但 canvas 空白区域依然透出页面背景色（通常是白色），这不是 globalAlpha 的问题，而是它本来就不管那块。
- 值为 0 → 新绘制内容完全不可见（但仍执行绘图逻辑，可能拖慢性能）
- 值为 0.5 → 所有后续 fill、stroke、drawImage 的像素 alpha 通道统一乘以 0.5
- 值超出 [0,1] 范围会被自动截断（如 1.8 变成 1.0，-0.3 变成 0.0）
避免污染其他图形的关键：save/restore
globalAlpha 是上下文状态的一部分，一旦设置就会一直生效，直到你手动改回去或重置。想让某个圆半透明、其余图形保持不透明？不能只靠赋值，得用状态快照：
- 调用
ctx.save()记录当前状态（含原始 globalAlpha） - 设置
ctx.globalAlpha = 0.4并绘制目标图形 - 调用
ctx.restore()恢复之前的状态，后续绘制自动回到不透明
漏掉 save/restore，很可能导致后面几十个图形全变成意外半透明——这是新手最常踩的坑。
globalAlpha vs rgba() 颜色值
两者都能实现半透明，但适用场景不同：
-
globalAlpha：适合批量绘制同透明度的图形（比如粒子系统、蒙版层、渐变叠加） -
fillStyle = "rgba(255,0,0,0.7)"：适合单个图形独立控透明，且不影响其他绘制
注意：如果同时设置了 globalAlpha 和 rgba 颜色，最终透明度是两者相乘（例如 globalAlpha=0.5 + rgba(...,0.6) → 实际 alpha=0.3）。混用时务必心里有数。
和 drawImage 的配合很可靠
设置 globalAlpha 后调用 drawImage()，图像一定会按该透明度渲染——无论源图是 JPG 还是带 Alpha 通道的 PNG。
- JPG 图像本身无透明通道，globalAlpha 直接让它整体变淡
- PNG 图像已有透明部分，globalAlpha 会进一步降低其整体不透明度（逐像素相乘）
- 这个行为稳定、可预测，是做 UI 图层淡入/淡出、贴图叠加的常用手段
