生活随笔
收集整理的這篇文章主要介紹了
抽奖之手机刮刮卡
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
直接看效果點這里（記得模擬手機噢）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<title> 刮刮卡 </title>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
<script>
var oCanvas = document.getElementById('canvas'),
aPrizeList = ['http://ued.taobao.org/blog/wp-content/themes/taobaoued/images/logo.png', 'http://i1.sinaimg.cn/dy/deco/2013/0329/logo/LOGO_1x.png'],
prizeImg = aPrizeList[Math.floor(Math.random() * aPrizeList.length)];
scratch(oCanvas, prizeImg, 0.8, function(){
alert('end.');
});
/**
* 刮刮卡
* @param oCanvas canvas繪圖對象
* @param prizeImg 中獎圖片
* @param scale 刮開區域占比
* @param callback 刮開后執行的函數
*/
function scratch(oCanvas, prizeImg, scale, callback){
if(!oCanvas.getContext) return;
var w = oCanvas.getAttribute('width'),
h = oCanvas.getAttribute('height'),
ctx = oCanvas.getContext('2d'),
fn = callback || function(){},
bEnd = false; // 防止touchend多次執行回調
// 設置獎品圖片
oCanvas.style.background = 'url('+ prizeImg +') 0 0/cover no-repeat';
// 繪制灰色刮獎區域
ctx.fillStyle = "#999";
ctx.fillRect(0,0, w, h);
// 設置重疊顯示方式
ctx.globalCompositeOperation="destination-out";
// 綁定事件
oCanvas.addEventListener('touchstart', function(){
// 按下并滑動
oCanvas.addEventListener('touchmove', function(e){
e.preventDefault();
var x = e.targetTouches[0].clientX + document.body.scrollLeft - oCanvas.offsetLeft,
y = e.targetTouches[0].clientY + document.body.scrollTop - oCanvas.offsetTop;
ctx.beginPath();
ctx.arc(x, y, 15, 0, Math.PI*2);
ctx.fill();
ctx.closePath();
});
oCanvas.addEventListener('touchend', function(e){
e.preventDefault();
var count = 0,
datas = ctx.getImageData(0,0,w,h);
for (var i = 0, len = datas.data.length; i < len; i++) {
if (datas.data[i] == 0) {
count++;
}
}
if (count >= datas.data.length * scale && !bEnd) {
fn();
ctx.fillRect(0,0,w,h);
bEnd = true;
}
});
});
}
</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的抽奖之手机刮刮卡的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
