官术网_书友最值得收藏!

4.5 圖形合成

本節(jié)將介紹圖形合成的一般方法,以及路徑裁切的實(shí)現(xiàn)。

4.5.1 合成

視頻講解

當(dāng)兩個(gè)或兩個(gè)以上的圖形存在重疊區(qū)域時(shí),默認(rèn)情況下一個(gè)圖形畫在前一個(gè)圖形之上。通過指定圖形globalCompositeOperation屬性的值可以改變圖形的繪制順序或繪制方式,從而實(shí)現(xiàn)更多種可能。

【示例】下面示例設(shè)置所有圖形的透明度為1,即不透明。設(shè)置globalCompositeOperation屬性值為source-over,即默認(rèn)設(shè)置,新的圖形會(huì)覆蓋在原有圖形之上,也可以指定其他值,詳見表4.1。

在瀏覽器中的預(yù)覽效果如圖4.39所示。如果將globalAlpha的值更改為0.5(ctx.globalAlpha=0.5;),則兩個(gè)圖形都會(huì)呈半透明效果,如圖4.40所示。

圖4.39 圖形的組合

圖4.40 半透明效果

表4.1給出了globalCompositeOperation屬性所有可用的值。表中的圖例矩形表示為B,為先繪制的圖形(原有內(nèi)容為destination),圓形表示為A,為后繪制的圖形(新圖形為source)。在應(yīng)用時(shí)注意globalCompositeOperation語句的位置,應(yīng)處在原有內(nèi)容與新圖形之間。Chrome瀏覽器支持大多數(shù)屬性值,無效的在表中已經(jīng)標(biāo)出。Opera瀏覽器對(duì)這些屬性值的支持相對(duì)來說更好一些。

表4.1 globalCompositeOperation屬性所有可用的值

4.5.2 裁切

視頻講解

使用clip()方法能夠從原始畫布中剪切任意形狀和尺寸。其原理與繪制普通canvas圖形類似,只不過clip()的作用是形成一個(gè)蒙版,沒有被蒙版的區(qū)域會(huì)被隱藏。

提示:一旦剪切了某個(gè)區(qū)域,則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi),不能訪問畫布上的其他區(qū)域。用戶也可以在使用clip()方法前,通過使用save()方法對(duì)當(dāng)前畫布區(qū)域進(jìn)行保存,并在以后的任意時(shí)間通過restore()方法對(duì)其進(jìn)行恢復(fù)。

【示例】如果繪制一個(gè)圓形,并進(jìn)行裁切,則圓形之外的區(qū)域?qū)⒉粫?huì)繪制在canvas上。

可以看到只有圓形區(qū)域內(nèi)螺旋圖形被顯示了出來,其余部分被裁切掉了,效果如圖4.41所示。

圖4.41 裁切圖形

主站蜘蛛池模板: 出国| 府谷县| 屯留县| 浦北县| 菏泽市| 澄城县| 北碚区| 商洛市| 响水县| 博客| 乌鲁木齐县| 冀州市| 武川县| 韶关市| 平罗县| 财经| 行唐县| 桓仁| 长岭县| 淮北市| 洱源县| 大港区| 襄汾县| 汉源县| 即墨市| 宜君县| 三都| 湄潭县| 伊春市| 平利县| 商水县| 武清区| 若尔盖县| 莎车县| 瑞昌市| 彭水| 台江县| 夏河县| 泽州县| 吉安县| 枣庄市|