GlobalAlpha | HTML<canvas>属性

定义与用法

• globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。
• globalAlpha 属性值必须是介于 0.0（完全透明） 与 1.0（不透明） 之间的数字。

语法格式

context.globalAlpha=number;

默认值：1.0

示例代码

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

<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>

效果展示：

亲自试试

浏览器支持

属性
GlobalAlpha	Yes	Yes	Yes	Yes	Yes

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 globalAlpha 属性。

提示：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

属性值