Html5 Canvas初探學習筆記(7) -合成

本篇介紹另外兩個繪製的狀態值，分別是全域阿法值和合成操作，首先來看全域阿拉法值

全域阿拉法值很簡單，就是我們的argb值裡面的「##a」值，不同的是全域阿拉法值必須在0.0## （全透明）到1.0（全部透明）之間，對應先前提到的「a」值的0到255，預設值是1.0。 如下的程式碼將實現下面的效果：

context.fillStyle = "red";
context.save();
context.globalAlpha = 0.5;
context.fillRect(50,50,100,100);
context.restore();
context.fillRect(200,50,100,100);

restore，因為呼叫save時保留了fillStyle的red值，所以畫出的是半透的紅色正方形和不透的紅色正方形。 合成操作也是一個狀態值

globalCompositeOperation

#，定義他的不同值，將完成一些操作，主要是來源圖形（定義globalCompositeOperation 之前的繪製上下文）和目標圖形（定義globalCompositeOperation之後的繪製上下文）首先來看這段程式碼，將會實現下面的效果

context.fillStyle = "red";
context.globalCompositeOperation = "source-over";
context.fillRect(50,50,100,100);
context.fillStyle = "blue";
context.fillRect(100,100,100,100);

以下介紹

globalCompositeOperation

#的值對應的效果："destination-over"

：

有些值目前chrome

瀏覽器還不支持，需要等規範來規定

 以上就是Html5 Canvas初探學習筆記(7) -合成的內容，更多相關內容請關注PHP中文網（www.php.cn）！

#######