對于需要圖形分層的應(yīng)用，經(jīng)常需要處理透明度。本節(jié)，我們將學(xué)習(xí)如何使用全局透明度設(shè)置圖形的透明度。

圖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屬性設(shè)置畫布的全局透明度，并繪制圓:

//繪制圓

context.globalAlpha? =? 0.5;? //設(shè)置全局透明度context.beginPath();

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

context.fillStyle? = "red";

context.fill();

};

4. 在HTML文檔的body部分嵌入canvas標(biāo)簽：

工作原理

要使用HTML5的畫布API設(shè)置圖形的透明度，我們可以用globalAlpha屬性：

context.globalAlpha=[value]

globalAlpha屬性接受0到1之間的任意實數(shù)。我們可以設(shè)置globalAlpha為1，使圖形完全不透明，設(shè)置globalAlpha為0，使圖形完全透明。

總結(jié)

以上是生活随笔為你收集整理的html5画分形图形,2.5 绘制透明图形 - HTML5 Canvas 实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。