Canvas 透明度 globalAlpha - Canvas 基础教程

一般情况下，我们要绘制一个有点透明度的图形，采用的方案就是将颜色值 ( RGBA ) 中的 A 设置为一个比例，比如 80% 透明就是 A = 255 * 0.8

注意： 完全透明是 0，完全不透明是 255

然后翻看 Canvas API 手册的时候发现有一个属性 globalAlpha ，它用于设置全局透明度

什么意思呢？也就是和 fillStyle 一样，一旦设置了就永久生效，除非再次调用它重新设置

Canvas globalAlpha 属性

ctx..globalAlpha 属性用于设置全局透明度，那么加下来绘制的图形和图像都会保持一定的透明度

它的取值范围为 [0.0,1.0] 从完全透明到完全不透明

要注意，如果设置该值，除非再次调用重新设置，否则永久生效

语法

ctx.globalAlpha = value;

值	说明
value	一个在 0.0 （完全透明）和 1.0 （完全不透明）之间的浮点数。默认值是 1.0

如果数值 value 不在范围内，包括 Infinity 和 NaN ，无法赋值，那么 globalAlpha 会保持原有的数值

范例

设置全局透明度为 0.8 ，然后绘制一些矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-1" width="520" height="300">
</canvas>
</div>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.globalAlpha = 0.8

var img = new Image();
img.src = '/static/i/meimei_160x160.png';
img.onload = function() {
    draw(this);
};

function draw(img) {
    ctx.drawImage(img,10,10,img.width,img.height);
    ctx.fillStyle = "green"
    ctx.fillRect( 50,50,200,100);
    ctx.fillStyle = "#ffffff"
    ctx.fillRect(0,0,c.width,c.height);
    ctx.drawImage(img,10+200,10+200,img.width,img.height);
    ctx.fillStyle = "green"
    ctx.fillRect( 50+100,50+100,200,100);   
}

</script>

运行结果如下