CanvasRenderingContext2D.globalAlpha

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

在 Canvas Tutorial 中参见 Applying styles and color 章节。

语法

ctx.globalAlpha = value;

选项

value
数字在 0.0  (完全透明)和 1.0 (完全不透明)之间。 默认值是 1.0。 如果数值不在范围内,包括InfinityNaN ,无法赋值,并且 globalAlpha 会保持原有的数值。

示例

使用 globalAlpha 属性

这是一段使用 globalAlpha 属性的简单代码片段,绘制了2个半透明的矩形。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.globalAlpha = 0.5;

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

修改下面的代码并在线查看 canvas的变化:

globalAlpha 例子

此例中, 绘制了4个不同背景色的正方形。 在他们上面,绘制半透明的圆形。 将那个点绘制的所有图形的 globalAlpha 属性值都设置为0.2。通过 for 循环绘制半径逐渐增大的圆形。 最终形成的结果是放射性渐变。通过不停地叠加圆形, 使得先前绘制的圆形的透明度越来越暗。通过增加循环数量绘制更多的圆形,图片中心的背景将会变成完全不透明。

var ctx = document.getElementById('canvas').getContext('2d');

// draw background
ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,75,75);
ctx.fillStyle = '#FFF';

// set transparency value
ctx.globalAlpha = 0.2;

// Draw semi transparent circles
for (i=0;i<7;i++){
  ctx.beginPath();
  ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
  ctx.fill();
}

ScreenshotLive sample

规范描述

Specification Status Comment
WHATWG HTML Living Standard
CanvasRenderingContext2D.globalAlpha
Living Standard  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Gecko-specific 注解

  • 从 Gecko 5.0开始, 对 globalAlpha 指定无效的值不再抛出 SYNTAX_ERR 异常; 它们已经被默默地忽略了。
  • 在基于 WebKit- 和 Blink- 的浏览器中, 除了此属性外,还实现了一个不标准的并且不赞成使用的方法 ctx.setAlpha()

参见

文档标签和贡献者

 此页面的贡献者: Marco_dev, ice-i-snow
 最后编辑者: Marco_dev,