本篇介紹另外兩個繪製的狀態值,分別是全域阿法值和合成操作,首先來看全域阿拉法值
全域阿拉法值很簡單,就是我們的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
瀏覽器還不支持,需要等規範來規定