globalAlpha 是 Canvas 2D API 用来描述在canvas上绘图之前，设置图形和图片透明度的属性。 数值的范围从 0.0 （完全透明）到1.0 （完全不透明）。
首先，绘制一个红色矩形，然后将透明度（globalAlpha）设置为0.5，然后绘制一个蓝色和绿色矩形：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas globalAlpha属性使用-基础教程(nhooo.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);
//转换透明度
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（没有透明度）之间的数字。
| 默认值： | 1.0 |
|---|---|
| JavaScript 语法： | context.globalAlpha=number; |
| 值 | 描述 |
|---|---|
| number | 透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间。 |