首页
所有分类
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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
手机号码，密码正则验证
Sep 04 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
js select实现省市区联动选择
Apr 17 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
解决await在forEach中不起作用的问题
Feb 25 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
redis(3) Kotlin(1) Android Gradle(1) AOP(2) 验证表达式(1) Spring Security(2) V Rising(1) 记事本(1) maven(2) 动态权限(1)
You might like
ftp类(example.php)
2006/10/09 PHP
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
PHP中定义数组常量（array常量）的方法
2014/11/17 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
PHP排序算法类实例
2015/06/17 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
javascript一点特殊用法
2008/05/28 Javascript
JavaScript 的继承
2011/10/01 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python调用Windows命令打印文件
2020/02/07 Python
Python实现ATM系统
2020/02/17 Python
python属于跨平台语言码
2020/06/09 Python
ALEX AND ANI：手镯，项链，耳环和更多
2017/04/20 全球购物
文职个人求职信范文
2013/09/23 职场文书
生物科学系大学生的自我评价
2013/12/20 职场文书
党的群众路线学习材料
2014/05/16 职场文书
青年志愿者活动方案
2014/08/17 职场文书
售房委托书
2014/08/30 职场文书
java多态注意项小结
2021/10/16 Java/Android