首頁 > web前端 > H5教程 > Html5 Canvas初探學習筆記(7) -合成

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

黄舟
發布: 2017-02-28 15:43:29
原創
1553 人瀏覽過

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

全域阿拉法值很簡單,就是我們的argb值裡面的「##a」值,不同的是全域阿拉法值必須在0.0## (全透明)到1.0(全部透明)之間,對應先前提到的「a」值的0255,預設值是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);
登入後複製

Html5 Canvas初探學習筆記(7) -合成這個範例介紹全域阿拉法值的使用,同時說明了他是一個繪製狀態值,也可以使用</p>save<p><span   style=restore,因為呼叫save時保留了fillStylered值,所以畫出的是半透的紅色正方形和不透的紅色正方形。 合成操作也是一個狀態值

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);
登入後複製

Html5 Canvas初探學習筆記(7) -合成#這是</p>globalCompositeOperation<p><span   style=以下介紹

globalCompositeOperation

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

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

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

Html5 Canvas初探學習筆記(7) -合成</p><p></p><p> 有些值目前chrome

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


 以上就是Html5 Canvas初探學習筆記(7) -合成的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!


#######
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板