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 可能带来开销，应按需使用