HTML 参考手册

HTML 标签大全

HTML canvas globalAlpha 属性

globalAlpha 是 Canvas 2D API 用来描述在canvas上绘图之前,设置图形和图片透明度的属性。 数值的范围从 0.0 (完全透明)到1.0 (完全不透明)。

HTML canvas 参考手册

在线示例

首先,绘制一个红色矩形,然后将透明度(globalAlpha)设置为0.5,然后绘制一个蓝色和绿色矩形:

您的浏览器,不支持HTML5 canvas标签.
<!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(不透明) 之间。
 HTML canvas 参考手册