globalalpha只影响后续绘图操作的合成透明度，不改变canvas自身背景；其值需用save/restore隔离或手动重置，否则会持续生效并污染后续所有绘制内容。
globalAlpha 不是“设置画布背景透明度”，它只影响后续所有绘图操作（fillRect()、drawImage()、fillText() 等）的合成透明度，且会持续生效直到被重置。
为什么设了 globalAlpha = 0.3 后 canvas 空白处还是不透明？
因为 globalAlpha 对 canvas 元素自身的背景色（即像素缓冲区初始状态）完全无效。canvas 默认是全透明黑（alpha=0），你看到的白色/灰色其实是 body 背景透上来的。要让 canvas “看起来”透明，得确保其父容器、 甚至 都没设遮挡性背景色。
- 错误认知：以为
globalAlpha能让整个 canvas 区域变淡 - 真实行为：只让「新画上去的内容」按该 alpha 值与当前缓冲区混合
- 首次绘制永远走
source-over合成，底层无内容可混合，所以不会“透出页面背景”
怎么安全地只让某几个图形半透明，又不影响后面绘制？
必须用 ctx.save() 和 ctx.restore() 隔离作用域，否则 globalAlpha 会污染后续所有绘图（比如文字、边框、新图层全跟着变淡）。
- 在修改前调用
ctx.save() - 设置
ctx.globalAlpha = 0.4，再执行目标绘制（如fillRect()） - 立刻调用
ctx.restore()恢复之前的状态（含原始globalAlpha值） - 避免用
ctx.globalAlpha = 1.0手动重置——万一之前不是 1.0，就引入隐式状态偏差
做淡入淡出动画时，globalAlpha 容易踩哪些坑？
关键不是数值本身，而是帧间状态管理和合成节奏。requestAnimationFrame 是唯一可靠节拍器；手动 setTimeout/setInterval 会导致跳帧、闪烁或卡顿。
- 双图层过渡时，必须严格反向控制：
A的 alpha 为1 - t，B的 alpha 为t，且drawImage()参数完全一致 - 每帧结束前务必
ctx.restore()或重置globalAlpha = 1.0，否则下一帧文字/UI 元素也会变淡 - alpha 值保留两位小数即可（如
0.42），过度计算浮点精度反而拖慢渲染 - 若图像本身带 alpha 通道（如 PNG），
globalAlpha会二次叠加——这是预期行为，不是 bug
真正决定效果是否自然的，是帧率稳定性与 alpha 步进是否线性均匀，而不是把值算到小数点后五位。状态隔离没做好，再精细的渐变也掩盖不了文字突然变淡的突兀感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
