Canvas 的 globalAlpha 属性设置后续所有绘图操作的全局透明度，取值范围为0（完全透明）到1（完全不透明），默认为1，影响路径、图像、文字等所有绘制内容，需配合 save/restore 控制作用范围。
Canvas 的 globalAlpha 属性用于设置后续所有绘图操作的全局透明度，取值范围是 0（完全透明）到 1（完全不透明），默认为 1。它不是 CSS 的 opacity，而是作用于 Canvas 2D 绘图上下文的渲染阶段，影响所有绘制内容（包括路径、图像、文字等）。
globalAlpha 的基本用法
通过 ctx.globalAlpha = value 设置后，所有后续的 fill()、stroke()、drawImage() 等操作都会按该透明度混合绘制。该值会持续生效，直到被重新赋值或重置。
- 设置为
0.5：所有图形半透明叠加，底层内容可见 - 设置为
0：后续绘制完全不可见（但依然执行，可能影响性能） - 设置为
1：恢复完全不透明（常用于重置）
避免意外影响其他绘制
globalAlpha 是上下文状态的一部分，不会自动隔离。若只希望某一部分内容半透明，需手动保存/恢复绘图状态，否则会影响之后所有绘制：
- 使用
ctx.save()在设置前保存当前状态 - 设置
globalAlpha并执行绘制 - 用
ctx.restore()恢复之前的状态（含原始 alpha 值）
例如绘制一个半透明圆而不影响后续矩形：
ctx.save();ctx.globalAlpha = 0.4;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100); // 半透明
ctx.restore();
ctx.fillRect(200, 50, 100, 100); // 完全不透明
与 compositeOperation 配合使用
globalAlpha 控制“画上去时有多淡”，而 globalCompositeOperation 控制“如何与已有像素混合”。两者可组合实现更精细效果：
- 先设
globalAlpha = 0.3，再设globalCompositeOperation = "lighter"，可实现柔和的光晕叠加 - 注意顺序：alpha 在合成前应用，所以它会影响参与合成的源像素透明度
- 若要精确控制混合行为，建议在 save/restore 块内统一设置 alpha 和 compositeOperation
常见误区提醒
很多人误以为 globalAlpha 类似图层 opacity，但实际上它直接参与像素级混合计算，且不区分绘制对象类型：
- 对
drawImage()也生效——即使图片本身带 alpha 通道，globalAlpha会进一步降低整体不透明度 - 无法单独设置某次 fillStyle 或 strokeStyle 的透明度——如需不同透明度图形，必须切换 globalAlpha 或使用带 alpha 的颜色（如
"rgba(255,0,0,0.7)"） - 动画中频繁修改 globalAlpha 不影响性能，但滥用 save/restore 可能带来开销，应按需使用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
