CanvasRenderingContext2D：globalAlpha 属性

基线广泛可用

此功能已得到良好建立，可在许多设备和浏览器版本上运行。它自 2015 年 7 月.

报告反馈

Canvas 2D API 的 CanvasRenderingContext2D.globalAlpha 属性指定在形状和图像绘制到画布上之前应用于它们的 alpha（透明度）值。

值

注意：另请参阅 Canvas 教程中的应用样式和颜色章节。

示例

介于 `0.0`（完全透明）和 `1.0`（完全不透明）之间的数字，包含边界值。默认值为 `1.0`。超出该范围的值，包括 `Infinity` 和 `NaN`，将不会设置，并且 `globalAlpha` 将保留其先前值。

绘制半透明形状

HTML

此示例使用 globalAlpha 属性绘制两个半透明矩形。

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

JavaScript

html

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);

js

结果

叠加透明形状

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

<canvas id="canvas" width="150" height="150"></canvas>

html

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

// Draw background
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";

// Set transparency value
ctx.globalAlpha = 0.2;

// Draw transparent circles
for (let i = 0; i < 7; i++) {
  ctx.beginPath();
  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
  ctx.fill();
}