js+html5如何實(shí)現(xiàn)移動(dòng)端刮刮樂
小編給大家分享一下js+html5如何實(shí)現(xiàn)移動(dòng)端刮刮樂，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。 創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場，引領(lǐng)市場！
1、用HTML 5 canvas globalCompositeOperation 屬性實(shí)現(xiàn)刮刮樂
思路：
（1）首先需要一個(gè)盒子定位，確定刮刮樂區(qū)域想要放在哪里
（2）定位盒子里有個(gè)放內(nèi)容的盒子，也就是放獎(jiǎng)品的
（3）用一個(gè)畫布(canvas)把上面的盒子蓋住
（4）當(dāng)手觸摸移動(dòng)的時(shí)候，可以擦除部分畫布，露出獎(jiǎng)品區(qū)
（5）當(dāng)擦除足夠多(3/4)的時(shí)候，可以選擇讓畫布自動(dòng)消失，慢慢淡出（這個(gè)效果選做）
主要是第四步，如何擦除？
這里選用 globalCompositeOperation，即Canvas中的合成操作。簡單來說,Composite(組合),就是對你在繪圖中,后繪制的圖形與先繪制的圖形之間的組合顯示效果,比如在國畫中,你先畫一筆紅色,再來一筆綠色,相交的部分是一種混色,而在油畫中,綠色就會(huì)覆蓋掉相交部分的紅色,這在程序繪圖中的處理就是Composite,Canvas API中對應(yīng)的函數(shù)就是globalCompositeOperation。
globalCompositeOperation中有個(gè)屬性值是“destination-out"，也就是當(dāng)繪畫重疊時(shí)顯示透明。剛好用到這里，我們就可以在畫布上亂畫，畫過的地方就是重疊的地方，就會(huì)變成透明，然后露出畫布下的東西，也就是我們想要的效果。
html 代碼如下：
恭喜發(fā)財(cái)，紅包拿來
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
/* 畫布偏移量，下面用到的時(shí)候再介紹*/
var arr = getOffset(canvas);
var oLeft = arr[0];
var oTop = arr[1];
/* 初始化畫布*/
ctx.beginPath();
ctx.fillStyle = '#ccc';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.closePath();
/* 增加觸摸監(jiān)聽*/
document.addEventListener("touchstart",function(){
/* 初始化畫筆*/
ctx.beginPath();
/* 畫筆粗細(xì)*/
ctx.lineWidth = 30;
/* 設(shè)置組合效果*/
ctx.globalCompositeOperation = 'destination-out';
/* 移動(dòng)畫筆原點(diǎn)*/
ctx.moveTo(event.touches[0].pageX-oLeft,event.touches[0].pageY-oTop);
},false)
document.addEventListener("touchmove",function(){
/* 根據(jù)手指移動(dòng)畫線，使之變透明*/
ctx.lineTo(event.touches[0].pageX-oLeft,event.touches[0].pageY-oTop);
/* 填充*/
ctx.stroke();
})
/* 之所以會(huì)用到下面的那個(gè)函數(shù)getOffset（obj）
* 是因?yàn)閑vent.touches[0].pageX、pageY獲取的是相對于可視窗口的距離
* 而lineTo畫筆的定位是根據(jù)畫布位置定位的
* 所以就要先獲取到畫布(canvas)相對于可視窗口的距離，然后計(jì)算得出觸摸點(diǎn)相對于畫布的距離
* */
/* 獲取該元素到可視窗口的距離*/
function getOffset(obj){
var valLeft = 0,valTop = 0;
function get(obj){
valLeft += obj.offsetLeft;
valTop += obj.offsetTop;
/* 不到最外層就一直調(diào)用，直到offsetParent為body*/
if (obj.offsetParent.tagName!='BODY') {
get(obj.offsetParent);
}
return [valLeft,valTop];
}
return get(obj);
}
css代碼如下：
*{
margin: 0;
padding: 0;
}
#main{
width: 100%;
padding: 20px 0;
background-color: red;
}
.canvasBox{
width: 78%;
height: 160px;
border-radius: 10px;
background-color: #FFF;
margin-left: 11%;
line-height: 160px;
text-align: center;
position: relative;
}
#canvas{
width: 96%;
height: 96%;
position: absolute;
left: 2%;
top: 2%;
background-color: transparent;
}第五步要用到canvas像素點(diǎn)的獲取(這塊注意，像素級操作，要在服務(wù)器環(huán)境下打開)
getImageData(int x,int y,int width,int height)：該方法獲取canvas上從(x,y)點(diǎn)開始，寬為width、高為height的圖片區(qū)域的數(shù)據(jù)，該方法返回的是一個(gè)CanvasPixelArray對象，該對象具有width、height、data等屬性。data屬性為一個(gè)數(shù)組，該數(shù)組每4個(gè)元素對應(yīng)一個(gè)像素點(diǎn)。
(對圖片的反相操作也可以這樣做，改變r(jià)gba值)
getImageData(int x,int y,int width,int height)返回的對象，data里面存儲的是像素點(diǎn)信息
我們再打印data,data屬性為一個(gè)數(shù)組，每4個(gè)元素對應(yīng)一個(gè)像素點(diǎn)（以rgba的形式保存每一個(gè)像素點(diǎn)的信息）。
所以我們就可以根據(jù)像素點(diǎn)的opcity值來判斷這個(gè)像素點(diǎn)是不是透明，是不是等于0？
透明的像素點(diǎn)數(shù)量/總像素點(diǎn)數(shù)量 = 擦除比例
js代碼：
document.addEventListener("touchend",function(){
/* 獲取imageData對象*/
var imageDate = ctx.getImageData(0,0,canvas.width,canvas.height);
/* */
var allPX = imageDate.width * imageDate.height;
var iNum = 0;//記錄刮開的像素點(diǎn)個(gè)數(shù)
for(var i=0;i= allPX*3/4){
// disappear里面寫了緩慢清除的css3動(dòng)畫效果
canvas.setAttribute('class','disappear');
}
},false)" .disappear " 的css樣式，css3消失動(dòng)畫
.disappear{
-webkit-animation: disa 2s 1;
animation: disa 2s 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes disa{
0%{opacity:1;}
100%{opacity: 0;}
}以上是“js+html5如何實(shí)現(xiàn)移動(dòng)端刮刮樂”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)頁名稱：js+html5如何實(shí)現(xiàn)移動(dòng)端刮刮樂
分享URL：http://weahome.cn/article/jsshdi.html
重慶分公司
重慶分公司
