直接看效果点这里（记得模拟手机噢）<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" c ...
直接看效果点这里（记得模拟手机噢）
<!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(){}; // 设置奖品图片 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) { fn(); ctx.fillRect(0,0,w,h); } oCanvas.removeEventListener('touchmove'); oCanvas.removeEventListener('touchend'); }); }); }</script></body></html>
原标题：【回忆1314】抽奖之手机刮刮卡
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
