原創(chuàng)：轉(zhuǎn)載請備明鏈接
程序員有一種慣性思維，就是看見一些會動的東西（帶點科技含量的，貓啊，狗啊就算了），總要先想一遍，這玩意用代碼是怎么控制的。比如電梯，路邊的霓虹燈，遙控器，小孩子的玩具等，都統(tǒng)統(tǒng)被程序員“意淫”過。
有時候還會感覺程序員看世界會看的透徹一點.............
想必大家都玩過刮刮樂，下面就介紹一種刮刮樂的移動端實現(xiàn)方式！用到canvas
1、用HTML 5 canvas globalCompositeOperation 屬性實現(xiàn)刮刮樂
思路：
（1）首先需要一個盒子定位，確定刮刮樂區(qū)域想要放在哪里
?。?）定位盒子里有個放內(nèi)容的盒子，也就是放獎品的
?。?）用一個畫布(canvas)把上面的盒子蓋住
?。?）當(dāng)手觸摸移動的時候，可以擦除部分畫布，露出獎品區(qū)
?。?）當(dāng)擦除足夠多(3/4)的時候，可以選擇讓畫布自動消失，慢慢淡出（這個效果選做）
主要是第四步，如何擦除？
這里選用 globalCompositeOperation，即Canvas中的合成操作。簡單來說,Composite(組合),就是對你在繪圖中,后繪制的圖形與先繪制的圖形之間的組合顯示效果,比如在國畫中,你先畫一筆紅色,再來一筆綠色,相交的部分是一種混色,而在油畫中,綠色就會覆蓋掉相交部分的紅色,這在程序繪圖中的處理就是Composite,Canvas API中對應(yīng)的函數(shù)就是globalCompositeOperation。
globalCompositeOperation中有個屬性值是“destination-out"，也就是當(dāng)繪畫重疊時顯示透明。剛好用到這里，我們就可以在畫布上亂畫，畫過的地方就是重疊的地方，就會變成透明，然后露出畫布下的東西，也就是我們想要的效果。
html 代碼如下：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/guaguale.css"/>
