HTML 參考手冊

HTML 標簽大全

HTML canvas globalAlpha 屬性

globalAlpha 是 Canvas 2D API 用來描述在canvas上繪圖之前，設置圖形和圖片透明度的屬性。數(shù)值的范圍從 0.0 （完全透明）到1.0 （完全不透明）。

在線示例

首先，繪制一個紅色矩形，然后將透明度（globalAlpha）設置為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 屬性設置或返回圖形的當前alpha或透明度值。

globalAlpha 屬性值必須是介于0.0（完全透明）和1.0（沒有透明度）之間的數(shù)字。

默認值：	1.0
JavaScript 語法：	context.globalAlpha=number;

屬性值

值	描述
number	透明值。必須介于 0.0（完全透明）與 1.0（不透明）之間。

HTML canvas 參考手冊

HTML: <template> 標簽