CanvasRenderingContext2D：globalAlpha 属性
Canvas 2D API 的 CanvasRenderingContext2D.globalAlpha 属性用于指定绘制到 canvas 上的形状和图像之前应用的 alpha（透明度）值。
值
介于 0.0（完全透明）和 1.0（完全不透明）之间的数字，包含边界值。默认值为 1.0。超出该范围的值，包括 Infinity 和 NaN，将不会被设置，globalAlpha 将保留其先前的值。
示例
绘制半透明形状
本示例使用 globalAlpha 属性绘制两个半透明矩形。
HTML
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");
// Draw background
ctx.fillStyle = "#ffdd00";
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = "#66cc00";
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = "#0099ff";
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = "#ff3300";
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = "white";
// 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();
}
规范
| 规范 |
|---|
| HTML # dom-context-2d-globalalpha-dev |
浏览器兼容性
加载中…
Gecko 特有说明
- 从 Gecko 5.0 开始，为
globalAlpha指定无效值不再抛出SYNTAX_ERR异常；这些值现在会被正确地静默忽略。
WebKit/Blink 特定说明
- 在基于 WebKit 和 Blink 的浏览器中，除了此属性外，还实现了一个非标准的、已弃用的方法
ctx.setAlpha()。