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。超出该范围的值,包括 InfinityNaN,将不会被设置,并且 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 Standard
# dom-context-2d-globalalpha-dev

浏览器兼容性

BCD tables only load in the browser

Gecko 特定注意事项

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

参见