你的位置:首页 > Java教程

[Java教程]【回忆1314】抽奖之手机刮刮卡


直接看效果点这里(记得模拟手机噢)

<!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>