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