<!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.floorMath.random) * aPrizeList.length)];
scratchoCanvas, prizeImg, 0.8, function){
alert'end.');
});
/**
* 刮刮卡
* @param oCanvas canvas绘图对象
* @param prizeImg 中奖图片
* @param scale 刮开区域占比
* @param callback 刮开后执行的函数
*/
function scratchoCanvas, 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.fillRect0,0, w, h);
// 设置重叠显示方式
ctx.globalCompositeOperation="destination-out";
// 绑定事件
oCanvas.addEventListener'touchstart', function){
// 按下并滑动
oCanvas.addEventListener'touchmove', functione){
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.arcx, y, 15, 0, Math.PI*2);
ctx.fill);
ctx.closePath);
});
oCanvas.addEventListener'touchend', functione){
e.preventDefault);
var count = 0,
datas = ctx.getImageData0,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.fillRect0,0,w,h);
bEnd = true;
}
});
});
}
</script>
</body>
</html>
