CanvasRenderingContext2D：globalAlpha 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.globalAlpha 属性指定将被绘制到 canvas 上的形状或图像的 alpha（透明度）值。

备注： 参见 Canvas 教程中应用样式和色彩这一章节。

值

一个在 0.0（完全透明）到 1.0（完全不透明）之间的数字，包括两者在内。默认值是 1.0。超出该范围的值，包括 Infinity 和 NaN，将不会被设置，并且 globalAlpha 将保留其先前的值。

示例

绘制半透明形状

此示例用 globalAlpha 属性绘制了 2 个半透明的矩形。

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.globalAlpha = 0.5;

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

结果

叠加透明形状

此示例演示了在彼此叠加多个透明形状的效果。我们首先绘制一个由四个不同颜色的方块组成的实心背景。接下来，将 globalAlpha 属性设置为 0.2（20% 不透明）；这个 alpha 级别将应用于所有透明形状。然后，我们使用一个 for 循环绘制一系列半径逐渐增大的圆。

随着每个新圆的绘制，下面圆的透明度实际上增加了。如果我们增加循环的次数（从而绘制更多的圆），背景最终会完全从图像的中心消失。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 绘制背景
ctx.fillStyle = "#FD0";
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = "#6C0";
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = "#09F";
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = "#F30";
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = "#FFF";

// 设置透明度值
ctx.globalAlpha = 0.2;

// 绘制透明圆
for (let i = 0; i < 7; i++) {
  ctx.beginPath();
  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
  ctx.fill();
}

规范

Specification
HTML
# dom-context-2d-globalalpha-dev

浏览器兼容性

Gecko 特定注意事项

  • 从 Gecko 5.0 开始，为 globalAlpha 指定无效值将不再抛出 SYNTAX_ERR 异常；这些值将被正确地静默忽略。
  • 在基于 WebKit 和 Blink 的浏览器中，除了此属性之外，还实现了一个非标准且已弃用的方法 ctx.setAlpha()。

参见