对于需要图形分层的应用，经常需要处理透明度。本节，我们将学习如何使用全局透明度设置图形的透明度。

图2-5 绘制透明图形

绘制步骤

按照以下步骤，在一个不透明的矩形之上，绘制一个透明的圆：

1. 定义2D画布上下文：

window.onload  = function(){

var canvas  = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

2. 绘制矩形：

//绘制矩形

context.beginPath();

context.rect(240,  30,  130,  130); context.fillStyle  = "blue";

context.fill();

3. 使用globalAlpha属性设置画布的全局透明度，并绘制圆:

//绘制圆

context.globalAlpha  =  0.5;  //设置全局透明度context.beginPath();

context.arc(359,  150,  70,  0,  2  * Math.PI, false);

context.fillStyle  = "red";

context.fill();

};

4. 在HTML文档的body部分嵌入canvas标签：

工作原理

要使用HTML5的画布API设置图形的透明度，我们可以用globalAlpha属性：

context.globalAlpha=[value]

globalAlpha属性接受0到1之间的任意实数。我们可以设置globalAlpha为1，使图形完全不透明，设置globalAlpha为0，使图形完全透明。