新聞中心
剛從南方回來就分了一個(gè)刮刮卡效果的頁面,特么的我在煩惱怎么用H5去實(shí)現(xiàn)這個(gè)效果呢,好不容易寫出來了,產(chǎn)品居然說:“既然你可以寫出來這個(gè)效果那當(dāng)然好了,開始我只是打算讓你實(shí)現(xiàn)點(diǎn)擊就出現(xiàn)呢!”… … 尼瑪干嘛不早說呢?????真是自找麻煩。既然寫了就分享給大家吧,這個(gè)效果其實(shí)很早就有了,只是我們不常用到罷了。H5的Canvas我很坦然的說我不會(huì)。但是既然工作上需要就需要學(xué)習(xí)一下了。雖然有demo但是自己寫的時(shí)候還是出現(xiàn)了很多的bug。下面給大家說一下實(shí)現(xiàn)刮刮卡效果的步驟吧。(ps:按照我自己的demo講了)
刮刮卡需求:
每一位用戶有三次刮刮卡的機(jī)會(huì)
本次刮刮卡的結(jié)果會(huì)覆蓋上次的結(jié)果
刮刮卡的中獎(jiǎng)幾率呈現(xiàn)為遞增的曲線(保證三次中必須有一次中獎(jiǎng))
刮出的結(jié)果包含按鈕既(領(lǐng)取獎(jiǎng)品 or 再來一次 )
分享活動(dòng)獎(jiǎng)品升級(這里主要是微信分享的回調(diào)了)
我們自己的需求,今天就說怎么制作刮刮卡,有這樣需求的可以找我要源碼
第一、body創(chuàng)建Canvas
這里我們首先創(chuàng)建了一個(gè)Canvas,并且在canvas底部加上了刮開后的效果。
第二、 頁面加載后開始初始化畫布
首先定義一些需要的變量
var c1; //畫布 var ctx; //畫筆 var ismousedown; //標(biāo)志用戶是否按下鼠標(biāo)或開始觸摸 var isOk=0; //標(biāo)志用戶是否已經(jīng)刮開了一半以上 var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]);//這是為了不同分辨率上配合@media自動(dòng)調(diào)節(jié)刮的寬度頁面加載后開始初始化畫布(這樣子就可以在頁面創(chuàng)建一個(gè)畫布了)
window.onload = function(){ c1 = document.getElementById("c1"); //這里很關(guān)鍵,canvas自帶兩個(gè)屬性width、height,我理解為畫布的分辨率,跟style中的width、height意義不同。 //最好設(shè)置成跟畫布在頁面中的實(shí)際大小一樣 //不然canvas中的坐標(biāo)跟鼠標(biāo)的坐標(biāo)無法匹配 c1.width=c1.clientWidth; c1.height=c1.clientHeight; ctx = c1.getContext("2d"); //PC端的處理 c1.addEventListener("mousemove",eventMove,false); c1.addEventListener("mousedown",eventDown,false); c1.addEventListener("mouseup",eventUp,false); //移動(dòng)端的處理 c1.addEventListener('touchstart', eventDown,false); c1.addEventListener('touchend', eventUp,false); c1.addEventListener('touchmove', eventMove,false); //初始化 initCanvas(); }第三、畫灰色的矩形鋪滿
function initCanvas(){//網(wǎng)上的做法是給canvas設(shè)置一張背景圖片,我這里的做法是直接在canvas下面另外放了個(gè)div //c1.style.backgroundImage="url(中獎(jiǎng)圖片.jpg)"; ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = '#aaaaaa'; ctx.fillRect(0,0,c1.clientWidth,c1.clientHeight); ctx.fill(); ctx.font = "Bold 30px Arial"; ctx.textAlign = "center"; ctx.fillStyle = "#999999"; ctx.fillText("刮一刮",c1.width/2,50);//把這個(gè)屬性設(shè)為這個(gè)就可以做出圓形橡皮擦的效果 //有些老的手機(jī)自帶瀏覽器不支持destination-out,下面的代碼中有修復(fù)的方法 ctx.globalCompositeOperation = 'destination-out';}第四、鼠標(biāo)按下 和 觸摸開始
function eventDown(e){ e.preventDefault(); ismousedown=true;}第五、鼠標(biāo)抬起 和 觸摸結(jié)束
function eventUp(e){ e.preventDefault(); //得到canvas的全部數(shù)據(jù) var a = ctx.getImageData(0,0,c1.width,c1.height); var j=0; for(var i=3;i第六、鼠標(biāo)移動(dòng) 和 觸摸移動(dòng)
//鼠標(biāo)移動(dòng) 和 觸摸移動(dòng) function eventMove(e){ e.preventDefault(); if(ismousedown) { if(e.changedTouches){ e=e.changedTouches[e.changedTouches.length-1]; } var topY = document.getElementById("top").offsetTop; var oX = c1.offsetLeft, oY = c1.offsetTop+topY; var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0, y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0; //畫360度的弧線,就是一個(gè)圓,因?yàn)樵O(shè)置了ctx.globalCompositeOperation = 'destination-out'; //畫出來是透明的 ctx.beginPath(); ctx.arc(x, y, fontem*1.2, 0, Math.PI * 2,true); //下面3行代碼是為了修復(fù)部分手機(jī)瀏覽器不支持destination-out //我也不是很清楚這樣做的原理是什么 c1.style.display = 'none'; c1.offsetHeight; c1.style.display = 'inherit'; ctx.fill(); } if(isOk){ var btn = document.getElementsByClassName("btn"); for(var i=0; i第七: 如果沒有抽中再來一次
很明顯,再來一次就是初始化所有的值,畫布重新加載,但是如果有次數(shù)限制的需求,務(wù)必在這里計(jì)算清楚。
注:由于我們要求的比較多今天就不說怎么計(jì)算中獎(jiǎng)概率的方法了。有需要的效果版可以單獨(dú)找我來要案例。寫錯(cuò)的地方歡迎指出。
案例請自行下載。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當(dāng)前文章:Html5實(shí)現(xiàn)移動(dòng)端、PC端刮刮卡效果-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載:http://biofuelwatch.net/article/dgcesg.html