對于需要圖形分層的應用，經常需要處理透明度。本節，我們將學習如何使用全局透明度設置圖形的透明度。

圖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，使圖形完全透明。