globalAlpha 是 Canvas 2D API 用來描述在canvas上繪圖之前,設(shè)置圖形和圖片透明度的屬性。 數(shù)值的范圍從 0.0 (完全透明)到1.0 (完全不透明)。
首先,繪制一個紅色矩形,然后將透明度(globalAlpha)設(shè)置為0.5,然后繪制一個藍色和綠色矩形:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas globalAlpha屬性使用-菜鳥教程(cainiaoplus.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
//轉(zhuǎn)換透明度
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
</script>
</body>
</html>測試看看 ?/?IEFirefoxOperaChromeSafari
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 globalAlpha 屬性。
注意:Internet Explorer 8 及之前的版本不支持 <canvas> 元素。
globalAlpha 屬性設(shè)置或返回圖形的當前alpha或透明度值。
globalAlpha 屬性值必須是介于0.0(完全透明)和1.0(沒有透明度)之間的數(shù)字。
| 默認值: | 1.0 |
|---|---|
| JavaScript 語法: | context.globalAlpha=number; |
| 值 | 描述 |
|---|---|
| number | 透明值。必須介于 0.0(完全透明) 與 1.0(不透明) 之間。 |