canvas圖層

（1）globalAlpha 用於設置所有繪制的透明度，默認值為0。

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

context.fillStyle = 'rgba(280,187,188,1)';
context.fillRect(10,10,100,100);

context.globalAlpha = 0.5;//透明度為0.5

context.fillStyle = 'rgba(180,187,188,1)';
context.fillRect(20,20,80,80);

（2）globalCompositionOperation 表示后繪制的圖形怎樣與先繪制的圖形結合。

context.fillStyle = 'rgba(280,187,188,1)';
context.fillRect(150,150,100,100);

context.globalCompositeOperation = 'source-in';//重疊部分可見，其他透明。

context.fillStyle = 'rgba(180,187,188,1)';
context.fillRect(160,160,80,80);

注：（1）globalCompositionOperation 可能值。

source-over（默認）：后繪制圖層位於前圖層上方。

source-in：圖層重疊部分可見，其他透明。

source-out：圖層不重疊部分可見，先繪制層透明。

source-atop：圖層重疊部分可見，先繪制不受影響。

destination-over：后繪制圖層位於前圖層下方。

destination-in：后繪制圖層位於前圖層下方，不重疊部分透明。

destination-out：后繪制圖形擦除與先繪制圖形重疊部分。

destination-atop：后繪制圖層位於下方，不重疊部分，先繪制層透明。

lighter：重疊部分的值相加，使該部分變亮。

copy：后繪制圖形替代與之重疊的先繪制圖形。

xor：重疊部分執行“異或”操作。

（2）不同瀏覽器對該屬性的實現存在較大差異。