原創(chuàng)：轉(zhuǎn)載請(qǐng)備明鏈接
程序員有一種慣性思維，就是看見(jiàn)一些會(huì)動(dòng)的東西（帶點(diǎn)科技含量的，貓啊，狗啊就算了），總要先想一遍，這玩意用代碼是怎么控制的。比如電梯，路邊的霓虹燈，遙控器，小孩子的玩具等，都統(tǒng)統(tǒng)被程序員“意淫”過(guò)。
有時(shí)候還會(huì)感覺(jué)程序員看世界會(huì)看的透徹一點(diǎn).............
想必大家都玩過(guò)刮刮樂(lè)，下面就介紹一種刮刮樂(lè)的移動(dòng)端實(shí)現(xiàn)方式！用到canvas
1、用HTML 5 canvas globalCompositeOperation 屬性實(shí)現(xiàn)刮刮樂(lè)
思路：
?。?）首先需要一個(gè)盒子定位，確定刮刮樂(lè)區(qū)域想要放在哪里
（2）定位盒子里有個(gè)放內(nèi)容的盒子，也就是放獎(jiǎng)品的
?。?）用一個(gè)畫(huà)布(canvas)把上面的盒子蓋住
（4）當(dāng)手觸摸移動(dòng)的時(shí)候，可以擦除部分畫(huà)布，露出獎(jiǎng)品區(qū)
?。?）當(dāng)擦除足夠多(3/4)的時(shí)候，可以選擇讓畫(huà)布自動(dòng)消失，慢慢淡出（這個(gè)效果選做）
主要是第四步，如何擦除？
這里選用 globalCompositeOperation，即Canvas中的合成操作。簡(jiǎn)單來(lái)說(shuō),Composite(組合),就是對(duì)你在繪圖中,后繪制的圖形與先繪制的圖形之間的組合顯示效果,比如在國(guó)畫(huà)中,你先畫(huà)一筆紅色,再來(lái)一筆綠色,相交的部分是一種混色,而在油畫(huà)中,綠色就會(huì)覆蓋掉相交部分的紅色,這在程序繪圖中的處理就是Composite,Canvas API中對(duì)應(yīng)的函數(shù)就是globalCompositeOperation。
globalCompositeOperation中有個(gè)屬性值是“destination-out"，也就是當(dāng)繪畫(huà)重疊時(shí)顯示透明。剛好用到這里，我們就可以在畫(huà)布上亂畫(huà)，畫(huà)過(guò)的地方就是重疊的地方，就會(huì)變成透明，然后露出畫(huà)布下的東西，也就是我們想要的效果。
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"/>
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖
2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞
2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention
2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析
2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二)
2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式