<!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>
新闻热点
疑难解答
