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

時間 2019-11-16

標籤學習 canvas globalcompositeoperation 作出神奇效果简体版

原文原文鏈接

說明

最先知道 canvas 的 globalCompositeOperation 屬性，是在須要實現一個刮刮卡效果的時候，當時也就是網上找到刮刮卡的效果趕忙完成任務就完了，此次又學習一次，但願能加深理解吧。javascript

先來看下 canvas 的 globalCompositeOperation屬性，具體是幹什麼的。css

定義

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

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

用法

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

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

屬性值	描述	效果
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 中的座標，用一個不規則的圖形逐漸增大，來擦除掉黑白色的圖片，就能夠慢慢顯示彩色的背景了。學習

也就是說咱們須要三張圖片ui

黑白的圖片

彩色的圖片

不規則形狀的圖片

代碼

<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<style> canvas { /* 設置鼠標的光標是一張圖片， 16和22 分別表示熱點的X座標和Y座標 */ /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor/url */ cursor: url('https://www.kkkk1000.com/images/mouse.png') 16 22, auto; } </style>
</head>

<body>
	<canvas id="canvas" width="400px" height="250px"></canvas>

	<script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 保存圖片路徑的數組 var urlArr = ["https://user-gold-cdn.xitu.io/2018/8/30/1658abd14d14b88a?w=640&h=360&f=png&s=221487", "https://user-gold-cdn.xitu.io/2018/8/30/1658abd15d587ca5?w=100&h=100&f=png&s=2721"]; // imgArr 保存加載後的圖片的數組，imgArr中保存的是真實的圖片 // loadImg 函數用來加載 urlArr 中全部的圖片 // 並返回一個保存全部圖片的數組 var imgArr = loadImg(urlArr); // flag 用來限制 點擊事件，一張圖片只會產生一次效果 var flag = false; function loadImg(urlArr) { var index = 0; var res = []; // 每次給 load 函數傳入一個圖片路徑，來加載圖片 load(urlArr[index]); function load(url) { // 若是 index 等於 urlArr.length， // 表示加載完 所有圖片了，就結束 load函數 if (index == urlArr.length) { // 加載徹底部圖片，調用 init 函數 init(); return; } var img = new Image(); img.src = url; // 無論當前圖片是否加載成功，都要加載下一張圖片 img.onload = next; img.onerror = function () { console.log(res[index] + "加載失敗"); next(); } // next 用來加載下一張圖片 function next() { // 把加載後的圖片，保存到 res 中 res[index] = img; load(urlArr[++index]) } } // 最後返回保存全部真實圖片的數組 return res; } function init() { // 先在canvas上畫黑白的圖片，而後再設置背景是彩色的圖片 // 避免先顯示出彩色圖片，再顯示出黑白的圖片 context.globalCompositeOperation = "source-over"; context.drawImage(imgArr[0], 0, 0, 400, 250); canvas.style.background = 'url(https://user-gold-cdn.xitu.io/2018/8/30/1658abd157ad9e8b?w=640&h=360&f=jpeg&s=44022)'; canvas.style.backgroundSize = "100% 100%"; // flag 是 true 時，鼠標點擊纔有水滴擴散的效果 flag = true; // canvas 綁定點擊事件，點擊時產生水滴擴散效果 canvas.onclick = diffusion; } // width 表示 不規則形狀的圖片的尺寸 var width = 0; // speed 表示擴散效果的速度 var speed = 8; // diffusion 函數根據鼠標座標，產生效果 function diffusion (e) { if (flag) { flag = false; context.globalCompositeOperation = "destination-out"; window.requestAnimationFrame(draw); // 根據鼠標座標，畫擴散效果 function draw() { // 這裏不必定須要是 1800 ，但必須是一個足夠大的數，能夠擴散出整張背景圖 if (width > 1800) { flag = true; return; } width += speed; // 獲取鼠標相對於 canvas 的座標 var x = e.layerX; var y = e.layerY; // 畫不規則形狀的圖片，逐漸增大圖片尺寸 context.drawImage(imgArr[1], x - (width / 2), y - (width / 2), width, width); window.requestAnimationFrame(draw); } } } </script>
</body>

</html>
複製代碼

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

效果圖

刮刮卡效果實現的思路：

一個 canvas 上先畫一層灰色，而後設置canvas的背景圖，設置 canvas 的 globalCompositeOperation屬性值爲 destination-out，點擊並移動時，根據移動點的座標，擦除掉灰色，當擦掉一部分時，再自動擦除掉所有灰色，顯示出背景來。

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

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

代碼在這裏。

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

代碼在這裏。

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

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