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()。