學習 canvas 的 globalCompositeOperation 做出的神奇效果

UnixAgain 發布于2019-08-26 17:49 / 3007人閱讀

摘要：主要的不同是，刮刮卡效果最后需要自動擦除掉全部灰色，這里有兩種方式。第二種方式，雖然不存在跨域的問題，但是，不能很好的根據刮刮卡上灰色的面積，控制最后擦除全部灰色的時機。

說明

最早知道 canvas 的 globalCompositeOperation 屬性，是在需要實現一個刮刮卡效果的時候，當時也就是網上找到刮刮卡的效果趕緊完成任務就完了，這次又學習一次，希望能加深理解吧。

先來看下 canvas 的 globalCompositeOperation屬性，具體是干什么的。

定義

globalCompositeOperation 屬性設置或返回如何將一個源（新的）圖像繪制到目標（已有）的圖像上。        
源圖像 = 您打算放置到畫布上的繪圖。        
目標圖像 = 您已經放置在畫布上的繪圖。

這個屬性用來設置要在繪制新形狀時應用的合成操作的類型，比如在一個藍色的矩形上畫一個紅色的圓形，是紅色在上顯示，還是藍色在上顯示，重疊的部分顯示還是不顯示，不重疊的部分又怎么顯示，等一些情況，在面對這些情況的時候，就是 globalCompositeOperation 屬性起作用的時候了。
在取默認值的情況下，都是顯示的，新畫的圖形會覆蓋原來的圖形。

用法

默認值： source-over
語法： context.globalCompositeOperation="source-in";

表格中的藍色矩形為目標圖像，紅色圓形為源圖像。

屬性值	描述	效果
source-over	默認。在目標圖像上顯示源圖像。
source-atop	在目標圖像頂部顯示源圖像。源圖像位于目標圖像之外的部分是不可見的。
source-in	在目標圖像中顯示源圖像。只有目標圖像內的源圖像部分會顯示，目標圖像是透明的。
source-out	在目標圖像之外顯示源圖像。只會顯示目標圖像之外源圖像部分，目標圖像是透明的。
destination-over	在源圖像上方顯示目標圖像。
destination-atop	在源圖像頂部顯示目標圖像。源圖像之外的目標圖像部分不會被顯示。
destination-in	在源圖像中顯示目標圖像。只有源圖像內的目標圖像部分會被顯示，源圖像是透明的。
destination-out	在源圖像外顯示目標圖像。只有源圖像外的目標圖像部分會被顯示，源圖像是透明的。
lighter	顯示源圖像 + 目標圖像。
copy	顯示源圖像。忽略目標圖像。
xor	使用異或操作對源圖像與目標圖像進行組合。

好的，下來實現一個水滴擴散的效果
效果圖

實現思路

在一個 canvas 上先畫出黑白色的圖片，然后設置背景是一張彩色的圖片，鼠標點擊時，設置 canvas 的 globalCompositeOperation 屬性值為 destination-out，根據鼠標在 canvas 中的坐標，用一個不規則的圖形逐漸增大，來擦除掉黑白色的圖片，就可以慢慢顯示彩色的背景了。

也就是說我們需要三張圖片

黑白的圖片

彩色的圖片

不規則形狀的圖片

代碼

我們繼續來實現一個刮刮卡的效果

效果圖

刮刮卡效果實現的思路：

一個 canvas 上先畫一層灰色，然后設置canvas的背景圖，設置 canvas 的 globalCompositeOperation屬性值為 destination-out，點擊并移動時，根據移動點的坐標，擦除掉灰色，當擦掉一部分時，再自動擦除掉全部灰色，顯示出背景來。

刮刮卡的效果和水滴擴散的效果，在開始的時候幾乎是一樣的，不過水滴擴散效果，用的是一張不規則形狀的圖片來清除黑白圖片，而刮刮卡效果，是通過畫線的方式，線比較粗而已，來清除上面的灰色。
主要的不同是，刮刮卡效果最后需要自動擦除掉全部灰色，這里有兩種方式。

第一種
使用 canvas 的 getImageData 方法，來獲取 canvas 上的像素信息，這個方法返回的對象的 data 屬性是一個一維數組，包含以 RGBA 順序的數據，數據使用 0 至 255（包含）的整數表示，詳細的可以看看 canvas 的像素操作。
用這個方法來判斷有多少已經擦除掉了，也就是通過一個變量來記錄有多少像素的RGBA的值是0，當變量的值超過某一個值時，就清除全部灰色。

代碼在這里。

第二種
就直接看移動了多少，鼠標移動時，會有一個變量進行自增運算，當這個變量，超過一定值時，就擦除全部灰色。

代碼在這里。

注意：
第一種方式使用 getImageData 存在跨域問題，不過因為這個效果中，沒有在canvas上畫圖片，而是設置canvas的 background 為一張圖片，所以這個還沒有影響，但是如果canvas上畫了其他圖片，就可能需要處理跨域的問題了。
使用 getImageData 能獲取到 canvas 上的像素信息，就可以根據刮刮卡上灰色的面積，決定擦除全部灰色的時機，更加靈活。

第二種方式，雖然不存在跨域的問題，但是，不能很好的根據刮刮卡上灰色的面積，控制最后擦除全部灰色的時機。

總結

文章中的效果主要是使用 globalCompositeOperation屬性取值為 destination-out ，而取值為其他值的時候，同樣也是可以制作出各種效果的，大家也可以發揮自己的想象力，去試試其它值，也許有新發現呢。

云服務器 GPU云服務器神奇的網站一個神奇的網站幻云我的世界神奇寶貝服務器我的世界神奇寶貝幻云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110163.html

撩妹技能 get，教你用 canvas 畫一場流星雨

摘要：現在就一起來做一場流星雨，用程序員的野路子浪漫一下。要畫一場流星雨，首先，自然我們要會畫一顆流星。畫一顆流星是的，的卻是沒這個，但是不代表我們畫不出來。而我們每一幀要保留的就是，上一幀透明度的流星，覆蓋畫布黑色矩形我們不能顯示。開始妹子都喜歡流星，如果她說不喜歡，那她一定是一個假妹子。現在就一起來做一場流星雨，用程序員的野路子浪漫一下。要畫一場流星雨，首先，自然我們要會畫一顆流...

cc17 2019-08-21 11:37 評論0 收藏0
簡單的canvas翻角效果

摘要：由于工作需求需要寫一個翻角效果鏈接右上角需要從無的狀態撕開一個標記且有動畫過程上圖是實現的效果圖不是對這個翻角效果的難點在于沒有翻開的時候露出的是下面的內容實現角度來說純動畫的設計方案并沒有相出一個好的對策于是撿起了好久之前學的入門級別的下由于工作需求 , 需要寫一個翻角效果;showImg(https://segmentfault.com/img/bVYVm4?w=135&h=12...

kun_jian 2019-08-21 17:43 評論0 收藏0
簡單的canvas翻角效果

摘要：由于工作需求需要寫一個翻角效果鏈接右上角需要從無的狀態撕開一個標記且有動畫過程上圖是實現的效果圖不是對這個翻角效果的難點在于沒有翻開的時候露出的是下面的內容實現角度來說純動畫的設計方案并沒有相出一個好的對策于是撿起了好久之前學的入門級別的下由于工作需求 , 需要寫一個翻角效果;showImg(https://segmentfault.com/img/bVYVm4?w=135&h=12...

Magicer 2019-08-01 18:03 評論0 收藏0