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

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

效果图:

具体代码:

<!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刮卡效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

    绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g

  • 手机端js和html5刮刮卡效果

    H5的Canvas实现刮刮卡效果. 刮开之后是随机生成的8位码. IE8不行... <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu

  • javascript+canvas实现刮刮卡抽奖效果

    运用canvas做的简单刮刮卡效果,每次刷新可重新测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me

  • 2种jQuery 实现刮刮卡效果

    其中拖拽刮涂层效果使用jquery UI的draggable方法 以下是源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"

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

    本文实例为大家分享了js刮卡效果的具体代码,供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <ti

  • jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】

    本文实例讲述了jQuery使用eraser.js插件实现擦除.刮刮卡效果的方法.分享给大家供大家参考,具体如下: jquery.eraser是一款使用鼠标或触摸的动作来擦除画布显示真正图片的插件.jquery.eraser插件的原理是用一个画布遮住图片,然后根据触摸或鼠标输入来擦除画布显示图片,您可以在参数中指定一个回调函数设置画笔大小. 使用需知: 必须确保图片是完全加载之后调用eraser(),否则它不会工作.插件正常运行在Safari,Chrome OS X和Windows,Android

  • 利用HTML5的画布Canvas实现刮刮卡效果

    先给大家展示效果: 查看演示   源码下载 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. HTML 我们只需要在页面中加入canvas标签元素,其他的就看

  • 简单实现Android刮刮卡效果

    本文实例为大家分享了Android仿刮刮卡效果展示的具体代码,供大家参考,具体内容如下 一.Xfermode 通过使用Xfermode将绘制的图形的像素和Canvas上对应位置的像素按照一定的规则进行混合,形成新的像素,再更新到Canvas中形成最终的图形,使用的时候都是通过Paint.setXfermode来实现. 二.混合模式分类 PorterDuff则是用于描述数字图像合成的基本手法,通过组合使用Porter-Duff操作,可完成任意2D图像的合成. public class Porter

  • Android刮刮卡效果实现代码

    本文实例为大家分享了Android刮刮卡效果,供大家参考,具体内容如下 android实现底层一张图片,上层一个遮罩层,触摸滑动按手指滑动路径实现去除遮罩效果,类似于抽奖的刮刮卡一样,不多说先上张效果图: 直接上代码: XfermodeView.java /** * Created by 57 on 2016-4-21. */ public class XfermodeView extends View{ private Bitmap mBgBitmap,mFgBitmap; private P

  • Cocos2d实现刮刮卡效果

    本文实例为大家分享了Cocos2d实现刮刮卡效果展示的具体代码,供大家参考,具体内容如下 本文代码适用于Cocos2d-x Quick-Community3.6 local TestScene = class("TestScene", function() return display.newScene("TestScene") end) function TestScene:ctor() end function TestScene:onEnter() self:

  • canvas绘制刮刮卡效果

    本文实例为大家分享了canvas绘制刮刮卡效果的具体代码,供大家参考,具体内容如下 先上图 代码 <!DOCTYPE html> <html> <head> <meta name="keywords" content="风舞红枫,前端技术,canvas"/> <meta name="description" content="风舞红枫,前端技术,canvas,vue,react,no

  • canvas实现刮刮卡效果

    目前在html5和css3的热潮下,html页面的效果也是层出不穷,下面我们来介绍使用canvas来模仿刮奖刮开效果. 原理 在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布,当手指或者鼠标点击画布并移动时,将画布上移动过的轨迹变成透明即可. 分析 demo中在class为content的div上盖上一层灰色的画布,然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标,通过在坐标原点位置画一个半径10px的透明圆形来透过画布,显示出画布下的内容.本demo是用时需要改变的内

随机推荐

其他