首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现PC端和移动端刮卡效果

Posted in Javascript onMarch 27, 2020

本文实例为大家分享了js刮卡效果的具体代码，供大家参考，具体内容如下

效果图：

js实现PC端和移动端刮卡效果

具体代码：

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>小月博客刮刮卡案例分享</title>
  <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
  <style type="text/css">
   * {
    padding: 0;
    margin: 0;
    list-style: none;
   }

   body {
    background: #E34830;
    position: relative;
   }

   .banner1 {
    display: block;
    width: 100%;
    /*height: auto;*/
    overflow: hidden;
   }

   .ggl {
    position: relative;
    width: 85.6%;
    height: 90px;
    margin: -5px auto;
    background: url(img/ggl.png) no-repeat center center;
    background-size: 100% 100%;
    border: 1px solid blue;
   }

   .canvas {
    position: absolute;
    top: 2px;
    left: 2.5%;
    width: 95%;
    height: 82px;
    line-height: 82px;
    text-align: center;
    z-index: 2;
    border: 1px solid black;
   }

   .info {
    position: absolute;
    top: 2px;
    left: 2.5%;
    width: 95%;
    height: 82px;
    text-align: center;
   }

   .info span {
    display: block;
    font-size: 18px;
   }

   #prompt {
    line-height: 40px;
   }

   .btn {
    position: relative;
    width: 50%;
    height: 35px;
    line-height: 35px;
    background: #df412b;
    color: #fff;
    border-radius: 5px;
    margin: 0 auto;
    z-index: 1;
   }

   .guize {
    display: block;
    width: 85.6%;
    height: auto;
    margin: 5% auto 10% auto;
    border-radius: 5px;
    border: 1px solid black;
   }

   .num {
    width: 90%;
    margin: 0 auto;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    margin-top: 5%;
    border: 1px solid black;
   }

   #ok,
   #no {
    display: none;
   }

   .pop {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
   }

   .pop img {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 15% auto;
   }
  </style>
  <script>
   //控制刮卡次数
   var t = 0;
   //初始化所有数据并且随机产生奖品
   var initialize = function() {
    //剩余刮卡次数
    $('.num1').html(4 - t);
    //随机数
    function getRandomNum(lbound, ubound) {
     return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
    }
    var r = getRandomNum(1, 100);
    var btn = document.getElementsByClassName("btn");
    for (var i = 0; i < btn.length; i++) {
     btn[i].style.zIndex = '1';
    }
    document.getElementById("no").style.display = "none";
    document.getElementById("ok").style.display = "none";

    //初始化涂抹面积
    isOk = 0;

    if (r < t * 33) {
     document.getElementById("prompt").innerHTML = "恭喜您，中奖了！"
     var ok = document.getElementById("ok");
     ok.style.display = "block";
     //点击领取奖品
     ok.onclick = function() {
      window.location.href = "prize.html"
     };
    } else {
     document.getElementById("prompt").innerHTML = "很遗憾，未中奖！"
     document.getElementById("no").style.display = "block";
    }
   };

   var c1; //画布
   var ctx; //画笔
   var ismousedown; //标志用户是否按下鼠标或开始触摸
   var isOk = 0; //标志用户是否已经刮开了一半以上
   var fontem = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]); //这是为了不同分辨率上配合@media自动调节刮的宽度

   /* 页面加载后开始初始化画布 */
   window.onload = function() {
    initialize();
    c1 = document.getElementById("c1");

    //这里很关键，canvas自带两个属性width、height,我理解为画布的分辨率，跟style中的width、height意义不同。
    //最好设置成跟画布在页面中的实际大小一样
    //不然canvas中的坐标跟鼠标的坐标无法匹配
    c1.width = c1.clientWidth;
    c1.height = c1.clientHeight;
    ctx = c1.getContext("2d");

    //PC端的处理
    c1.addEventListener("mousemove", eventMove, false);
    c1.addEventListener("mousedown", eventDown, false);
    c1.addEventListener("mouseup", eventUp, false);

    //移动端的处理
    c1.addEventListener('touchstart', eventDown, false);
    c1.addEventListener('touchend', eventUp, false);
    c1.addEventListener('touchmove', eventMove, false);

    //初始化
    initCanvas();
   }

   //初始化画布，画灰色的矩形铺满
   function initCanvas() {
    //网上的做法是给canvas设置一张背景图片，我这里的做法是直接在canvas下面另外放了个div。
    //c1.style.backgroundImage="url(中奖图片.jpg)";
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = '#aaaaaa';
    ctx.fillRect(0, 0, c1.clientWidth, c1.clientHeight);
    ctx.fill();

    ctx.font = "Bold 30px Arial";
    ctx.textAlign = "center";
    ctx.fillStyle = "#999999";
    ctx.fillText("刮一刮", c1.width / 2, 50);

    //把这个属性设为这个就可以做出圆形橡皮擦的效果
    //有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法
    ctx.globalCompositeOperation = 'destination-out';
   }

   //鼠标按下 和 触摸开始
   function eventDown(e) {
    e.preventDefault();
    ismousedown = true;
   }

   //鼠标抬起 和 触摸结束
   function eventUp(e) {
    e.preventDefault();

    //得到canvas的全部数据
    var a = ctx.getImageData(0, 0, c1.width, c1.height);
    var j = 0;
    for (var i = 3; i < a.data.length; i += 4) {
     if (a.data[i] == 0) j++;
    }

    //当被刮开的区域等于一半时，则可以开始处理结果
    if (j >= a.data.length / 8) {
     isOk = 1;
    }
    ismousedown = false;
   }

   //鼠标移动 和 触摸移动
   function eventMove(e) {
    e.preventDefault();
    if (ismousedown) {
     if (e.changedTouches) {
      e = e.changedTouches[e.changedTouches.length - 1];
     }
     var topY = document.getElementById("top").offsetTop;
     var oX = c1.offsetLeft,
      oY = c1.offsetTop + topY;

     var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX || 0,
      y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;

     //画360度的弧线，就是一个圆，因为设置了ctx.globalCompositeOperation = 'destination-out';
     //画出来是透明的
     ctx.beginPath();
     ctx.arc(x, y, fontem * 1.2, 0, Math.PI * 2, true);

     //下面3行代码是为了修复部分手机浏览器不支持destination-out
     //我也不是很清楚这样做的原理是什么
     c1.style.display = 'none';
     c1.offsetHeight;
     c1.style.display = 'inherit';

     ctx.fill();
    }

    if (isOk) {
     var btn = document.getElementsByClassName("btn");
     for (var i = 0; i < btn.length; i++) {
      btn[i].style.zIndex = '3';
     }
     document.getElementsByClassName("btn")[0].style.zIndex = "3";
    }
   }

   //没有中奖再来一次
   $("#no").click(function() {
    if (t > 3) {
     //因该弹出遮罩层提示您的次数已经用完了
     $('.pop1').show();
     $('.pop1 img').click(function() {
      $('.pop1').hide();
     })
    } else {
     t++;
     //初始化按钮
     document.getElementById("no").style.display = "none";
     document.getElementById("ok").style.display = "none";
     window.onload();
     initCanvas();

    }
   });
  </script>
 </head>

 <body>
  <img src="img/banner1.png" class="banner1" />
  <div class="ggl" id="top">
   <div class="info" id="prize">
    <span id="prompt"></span>
    <span class="btn" id="ok">领取奖品</span>
    <span class="btn" id="no">再来一次</span>
   </div>
   <canvas id="c1" class="canvas"></canvas>
  </div>
  <div class="num">
   您还有<span class="num1"></span>次刮卡机会
  </div>
  <img src="img/guize.png" class="guize" />

  <!-- 遮罩层1抽奖次数已经用完-->
  <div class="pop pop1">
   <img src="img/pop1.png" />
  </div>
  <div class="pop pop2">
   <img src="img/pop2.png" id="pop2" />
  </div>
 </body>

</html>

源码下载：js刮卡效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现PC端和移动端刮卡效果

- Author -

最骚的就是你

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具（可扫描目录）
Feb 09 Javascript
最近项目写了一些js，水平有待提高
Jan 31 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
js实现短信发送倒计时功能（正则验证）
Feb 10 #Javascript
BootStrap select2 动态改变值的方法
Feb 10 #Javascript
angularjs实现的前端分页控件示例
Feb 10 #Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 #Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 #Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 #Javascript
jQuery排序插件tableSorter使用方法
Feb 10 #Javascript
ICF-903L(1) AGC(1) 死亡搁浅(1) FS1016(1) 大话西游(1) AN-LP1(1) 原神(1) BCLer(1) 74HC4066(1) YB-230(1)
You might like
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
php定界符
2014/06/19 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php实现评论回复删除功能
2017/05/23 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python使用turtle库绘制树
2018/06/25 Python
python构建基础的爬虫教学
2018/12/23 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
python实现KNN近邻算法
2020/12/30 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
Under Armour澳大利亚官网：美国知名的高端功能性运动品牌
2018/02/22 全球购物
限量版运动鞋和街头服饰：TheDrop
2020/09/06 全球购物
局域网定义和特性
2016/01/23 面试题
幼儿园评语大全
2014/04/17 职场文书
摄影展策划方案
2014/06/02 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python