摘要:主要的不同是,刮刮卡效果最后需要自動擦除掉全部灰色,這里有兩種方式。第二種方式,雖然不存在跨域的問題,但是,不能很好的根據(jù)刮刮卡上灰色的面積,控制最后擦除全部灰色的時機(jī)。
說明
最早知道 canvas 的 globalCompositeOperation 屬性,是在需要實現(xiàn)一個刮刮卡效果的時候,當(dāng)時也就是網(wǎng)上找到刮刮卡的效果趕緊完成任務(wù)就完了,這次又學(xué)習(xí)一次,希望能加深理解吧。
先來看下 canvas 的 globalCompositeOperation屬性,具體是干什么的。
定義globalCompositeOperation 屬性設(shè)置或返回如何將一個源(新的)圖像繪制到目標(biāo)(已有)的圖像上。
源圖像 = 您打算放置到畫布上的繪圖。
目標(biāo)圖像 = 您已經(jīng)放置在畫布上的繪圖。
這個屬性用來設(shè)置要在繪制新形狀時應(yīng)用的合成操作的類型,比如在一個藍(lán)色的矩形上畫一個紅色的圓形,是紅色在上顯示,還是藍(lán)色在上顯示,重疊的部分顯示還是不顯示,不重疊的部分又怎么顯示,等一些情況,在面對這些情況的時候,就是 globalCompositeOperation 屬性起作用的時候了。
在取默認(rèn)值的情況下,都是顯示的,新畫的圖形會覆蓋原來的圖形。
默認(rèn)值: source-over
語法: context.globalCompositeOperation="source-in";
表格中的藍(lán)色矩形為目標(biāo)圖像,紅色圓形為源圖像。
屬性值 | 描述 | 效果 |
---|---|---|
source-over | 默認(rèn)。在目標(biāo)圖像上顯示源圖像。 | |
source-atop | 在目標(biāo)圖像頂部顯示源圖像。源圖像位于目標(biāo)圖像之外的部分是不可見的。 | |
source-in | 在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像內(nèi)的源圖像部分會顯示,目標(biāo)圖像是透明的。 | |
source-out | 在目標(biāo)圖像之外顯示源圖像。只會顯示目標(biāo)圖像之外源圖像部分,目標(biāo)圖像是透明的。 | |
destination-over | 在源圖像上方顯示目標(biāo)圖像。 | |
destination-atop | 在源圖像頂部顯示目標(biāo)圖像。源圖像之外的目標(biāo)圖像部分不會被顯示。 | |
destination-in | 在源圖像中顯示目標(biāo)圖像。只有源圖像內(nèi)的目標(biāo)圖像部分會被顯示,源圖像是透明的。 | |
destination-out | 在源圖像外顯示目標(biāo)圖像。只有源圖像外的目標(biāo)圖像部分會被顯示,源圖像是透明的。 | |
lighter | 顯示源圖像 + 目標(biāo)圖像。 | |
copy | 顯示源圖像。忽略目標(biāo)圖像。 | |
xor | 使用異或操作對源圖像與目標(biāo)圖像進(jìn)行組合。 |
好的,下來實現(xiàn)一個水滴擴(kuò)散的效果
效果圖
實現(xiàn)思路
在一個 canvas 上先畫出黑白色的圖片,然后設(shè)置背景是一張彩色的圖片,鼠標(biāo)點擊時,設(shè)置 canvas 的 globalCompositeOperation 屬性值為 destination-out,根據(jù)鼠標(biāo)在 canvas 中的 坐標(biāo),用一個不規(guī)則的圖形逐漸增大,來擦除掉黑白色的圖片,就可以慢慢顯示彩色的背景了。
也就是說我們需要三張圖片
黑白的圖片
彩色的圖片
不規(guī)則形狀的圖片
代碼
我們繼續(xù)來實現(xiàn)一個刮刮卡的效果
效果圖
刮刮卡效果實現(xiàn)的思路:
一個 canvas 上先畫一層灰色,然后設(shè)置canvas的背景圖,設(shè)置 canvas 的 globalCompositeOperation屬性值為 destination-out,點擊并移動時,根據(jù)移動點的坐標(biāo),擦除掉灰色,當(dāng)擦掉一部分時,再自動擦除掉全部灰色,顯示出背景來。
刮刮卡的效果和水滴擴(kuò)散的效果,在開始的時候幾乎是一樣的,不過水滴擴(kuò)散效果,用的是一張不規(guī)則形狀的圖片來清除黑白圖片,而刮刮卡效果,是通過畫線的方式,線比較粗而已,來清除上面的灰色。
主要的不同是,刮刮卡效果最后需要自動擦除掉全部灰色,這里有兩種方式。
第一種
使用 canvas 的 getImageData 方法,來獲取 canvas 上的像素信息,這個方法返回的對象的 data 屬性是一個一維數(shù)組,包含以 RGBA 順序的數(shù)據(jù),數(shù)據(jù)使用 0 至 255(包含)的整數(shù)表示,詳細(xì)的可以看看 canvas 的像素操作。
用這個方法來判斷有多少已經(jīng)擦除掉了,也就是通過一個變量來記錄有多少像素的RGBA的值是0,當(dāng)變量的值超過某一個值時,就清除全部灰色。
代碼在這里。
第二種
就直接看移動了多少,鼠標(biāo)移動時,會有一個變量進(jìn)行自增運算,當(dāng)這個變量,超過一定值時,就擦除全部灰色。
代碼在這里。
注意:
第一種方式使用 getImageData 存在跨域問題,不過因為這個效果中,沒有在canvas上畫圖片,而是設(shè)置canvas的 background 為一張圖片,所以這個還沒有影響,但是如果canvas上畫了其他圖片,就可能需要處理跨域的問題了。
使用 getImageData 能獲取到 canvas 上的像素信息,就可以根據(jù)刮刮卡上灰色的面積,決定擦除全部灰色的時機(jī),更加靈活。
第二種方式,雖然不存在跨域的問題,但是,不能很好的根據(jù)刮刮卡上灰色的面積,控制最后擦除全部灰色的時機(jī)。
總結(jié)文章中的效果主要是使用 globalCompositeOperation屬性取值為 destination-out ,而取值為其他值的時候,同樣也是可以制作出各種效果的,大家也可以發(fā)揮自己的想象力,去試試其它值,也許有新發(fā)現(xiàn)呢。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/110163.html
摘要:現(xiàn)在就一起來做一場流星雨,用程序員的野路子浪漫一下。要畫一場流星雨,首先,自然我們要會畫一顆流星。畫一顆流星是的,的卻是沒這個,但是不代表我們畫不出來。而我們每一幀要保留的就是,上一幀透明度的流星,覆蓋畫布黑色矩形我們不能顯示。 開始 妹子都喜歡流星,如果她說不喜歡,那她一定是一個假妹子。 現(xiàn)在就一起來做一場流星雨,用程序員的野路子浪漫一下。 要畫一場流星雨,首先,自然我們要會畫一顆流...
摘要:由于工作需求需要寫一個翻角效果鏈接右上角需要從無的狀態(tài)撕開一個標(biāo)記且有動畫過程上圖是實現(xiàn)的效果圖不是對這個翻角效果的難點在于沒有翻開的時候露出的是下面的內(nèi)容實現(xiàn)角度來說純動畫的設(shè)計方案并沒有相出一個好的對策于是撿起了好久之前學(xué)的入門級別的下 由于工作需求 , 需要寫一個翻角效果;showImg(https://segmentfault.com/img/bVYVm4?w=135&h=12...
摘要:由于工作需求需要寫一個翻角效果鏈接右上角需要從無的狀態(tài)撕開一個標(biāo)記且有動畫過程上圖是實現(xiàn)的效果圖不是對這個翻角效果的難點在于沒有翻開的時候露出的是下面的內(nèi)容實現(xiàn)角度來說純動畫的設(shè)計方案并沒有相出一個好的對策于是撿起了好久之前學(xué)的入門級別的下 由于工作需求 , 需要寫一個翻角效果;showImg(https://segmentfault.com/img/bVYVm4?w=135&h=12...
閱讀 433·2019-08-29 12:44
閱讀 3011·2019-08-26 17:49
閱讀 2432·2019-08-26 13:40
閱讀 1185·2019-08-26 13:39
閱讀 3663·2019-08-26 11:59
閱讀 1826·2019-08-26 10:59
閱讀 2465·2019-08-23 18:33
閱讀 2697·2019-08-23 18:30