首页
所有分类
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 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
JavaScript进阶（二）词法作用域与作用域链实例分析
May 09 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
TaiShan(1) 腾讯云(1) 数据备份(2) JDK(1) 内存池(1) 云服务器(1) Foreign Key(1) RecyclerView(1) queue(1) 外键约束(1)
You might like
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
angular.element方法汇总
2015/01/07 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
AngularJS入门教程一：路由用法初探
2017/05/27 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
Python无损压缩图片的示例代码
2020/08/06 Python
python实现学生信息管理系统源码
2021/02/22 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
Ted Baker美国官网：英国时尚品牌
2018/10/29 全球购物
Nº21官方在线商店：numeroventuno.com
2019/09/26 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
酒吧创业计划书
2014/01/18 职场文书
社会实践感言
2014/01/25 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
园艺师求职信
2014/04/27 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
见习报告格式要求
2014/11/04 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
5道关于python基础 while循环练习题
2021/11/27 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript