首页
所有分类
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 URL锚点取值方法
Feb 25 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
微信小程序 form组件详解
Oct 25 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
编写React组件项目实践分析
Mar 04 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 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
线程池(1) Ubuntu Server(6) Spring Data JPA(4) 域控制器(1) 池化技术(1) Repository接口(3) Android(19) systemctl(1) DHCP(2) 主题(1)
You might like
十天学会php之第一天
2006/10/09 PHP
php PDO异常处理详解
2016/11/20 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
Python 中 list 的各项操作技巧
2017/04/13 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python装饰器用法实例总结
2018/02/07 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python中setuptools的作用是什么
2020/06/19 Python
Python 实现简单的客户端认证
2020/07/29 Python
Python如何输出警告信息
2020/07/30 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
好药师网上药店：安全合法的网上药品零售药房
2017/02/15 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
2015年网络管理员工作总结
2015/05/21 职场文书
雨中的树观后感
2015/06/03 职场文书
聘任书格式及范文
2015/09/21 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Python学习之os包使用教程详解
2022/03/21 Python
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python