首页
所有分类
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 相关文章推荐
jQuery中文入门指南，翻译加实例，jQuery的起点教程
Jan 13 Javascript
Javascript面向对象编程
Mar 18 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
ES6 Generator基本使用方法示例
Jun 06 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
双向链表(6) 扫雷(1) TypeScript(2) Date(1) 模拟登录(1) router(1) Scheduled(1) 单向链表(1) NumPy(2) 区块链(2)
You might like
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
IE8 原生JSON支持
2009/04/13 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python交互环境下实现输入代码
2018/06/22 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Python使用xpath实现图片爬取
2020/09/16 Python
美国第一个网上卖鞋零售商：OnlineShoes.com
2017/09/24 全球购物
大学生个人自我鉴定
2013/12/03 职场文书
工地资料员岗位职责
2013/12/31 职场文书
医药营销个人求职信
2014/04/12 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
营销与策划实训报告
2014/11/05 职场文书
少年犯观后感
2015/06/11 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
详解Django的MVT设计模式
2021/04/29 Python
python 安全地删除列表元素的方法
2022/03/16 Python
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis