星空网 > 软件开发 > 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>

 

 

 

 




原标题:【回忆1314】抽奖之手机刮刮卡

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

1秒读懂这个FBA补货公式,卖家再也不用担心断货了!:https://www.ikjzd.com/articles/94011
Facebook推出新工具,助力小商家成功发展业务!:https://www.ikjzd.com/articles/94012
Shopee电商新玩法!从电商地理看马来西亚网购模式!:https://www.ikjzd.com/articles/94013
类目节点选择要谨慎!亚马逊Listing优化有方法!:https://www.ikjzd.com/articles/94015
亚马逊重大更新?Customer Choice操作可行吗?:https://www.ikjzd.com/articles/94017
获取亚马逊Review:Facebook Messenger教你这样做!:https://www.ikjzd.com/articles/94018
跨境支付百科——巴西支付篇:https://www.kjdsnews.com/a/1836648.html
大福地快捷酒店预订 大福酒店怎么走:https://www.vstour.cn/a/365187.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流