- HTML5+CSS3從入門到精通(微課精編版)
- 前端科技
- 651字
- 2021-02-03 09:30:46
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 裁切圖形
- Android應(yīng)用程序開發(fā)與典型案例
- Learn Type:Driven Development
- Interactive Data Visualization with Python
- Hands-On Data Structures and Algorithms with JavaScript
- C語言程序設(shè)計(jì)
- Hadoop+Spark大數(shù)據(jù)分析實(shí)戰(zhàn)
- PostgreSQL 11從入門到精通(視頻教學(xué)版)
- Spring Boot企業(yè)級(jí)項(xiàng)目開發(fā)實(shí)戰(zhàn)
- ASP.NET開發(fā)與應(yīng)用教程
- Mastering Web Application Development with AngularJS
- Python 3.7從入門到精通(視頻教學(xué)版)
- 編程改變生活:用Python提升你的能力(進(jìn)階篇·微課視頻版)
- Python計(jì)算機(jī)視覺與深度學(xué)習(xí)實(shí)戰(zhàn)
- SQL Server 2014 Development Essentials
- Effective C++:改善程序與設(shè)計(jì)的55個(gè)具體做法(第三版)中文版(雙色)