PC端和移动端刮卡效果

最新推荐文章于 2023-12-03 07:00:00 发布
最新推荐文章于 2023-12-03 07:00:00 发布
阅读量4.4k 收藏 3
点赞数
分类专栏： web前端学习 文章标签： 移动 博客 pc 刮刮卡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/51594869
版权

这里写图片描述

下载地址：http://download.csdn.net/detail/cometwo/9542401

<!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>
最骚的就是你
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 刮刮乐抽奖H5项目
weixin_62908035的博客
08-16 924
vue 刮刮乐H5项目
刮刮卡vue组件可在PC或移动端使用
08-09
刮刮卡vue组件，可在PC或移动端使用
【Axure教程】橡皮擦的擦除效果——刮奖原型
mushe93的博客
03-02 639
今天教大家在Axure中如何制作橡皮刷的效果，我们会以刮奖原型为案例~~~
Vue实现刮刮乐项目
FGGIT的博客
02-02 961
Vue实现刮刮乐项目
Unity_在pc端，用鼠标实现刮刮乐效果
最新发布
.Res.
12-03 293
其次，我们想要对一张图片的像素点进行操作，那么这个图片应该转换为。最后，创建rawImage的ui对象，将准备好的图片赋予给它。首先，要想要一张图片透明，那么应该改变图片的alpha值。，且需要勾选读写属性（
vue 实现移动端、pc端刮刮乐
weixin_45630494的博客
12-28 2133
vue实现标题移动端、pc端刮刮乐功能 方法一：lzy-scratch-card （个人比较推荐） 基本用法 1.使用npm下载安装 npm install lzy-scratch-card --save 2.项目中引入 import scratchCard from "lzy-scratch-card"; 3.项目使用 <scratch-card elementId="elementId" width="254px"
前端实现刮刮乐效果
11-11 1218
canvas实现刮刮乐效果
vue + fabricjs实现刮刮乐游戏
采黎的博客
10-17 678
刮刮乐大家都玩过吧，采黎也是深受其害，就是忍不住[笑哭]；特别是好运十倍这一款，总给人一种中奖机率很大的感觉；今天采黎做了一款线上刮刮乐-好运十倍，供大家娱乐。
canvas实现刮刮卡，vue3实现
qq_39933787的博客
09-25 953
使用canvas实现刮刮卡
js实现PC端和移动端刮卡效果
10-20
主要为大家详细介绍了js实现PC端和移动端刮卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
移动端刮刮乐的实现方式（js+HTML5）
10-20
本篇文章主要介绍了移动端刮刮乐的实现方法以及实现代码。具有很好的参考价值。下面跟着小编一起来看下吧
vue实现pdf导出解决生成canvas模糊等问题(推荐)
10-17
最近公司项目需要，利用vue实现pdf导出，从而保存到本地打印出来，说起来好像也很容易，具体要怎么实现呢？下面小编给大家带来了vue实现pdf导出解决生成canvas模糊等问题，需要的朋友参考下吧
PC端和移动端自适应问题的快速解决方法
09-24
如何解决PC端和移动端自适应问题？下面小编就为大家带来一篇PC端和移动端自适应问题的快速解决方法。希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦
如何使用JS实现PC端移动端的刮卡效果.pdf
02-20
本资源主要介绍如何使用JavaScript实现PC端和移动端的刮卡效果。刮卡效果是一种常见的交互效果，用户可以通过刮卡来揭示隐藏的信息或奖品。本资源提供了完整的代码示例，展示如何使用HTML、CSS和JavaScript来实现刮...
pc端是什么意思_PC端与移动端区别
07-12
PC端的操作方式与移动端已经有了明显的差别，PC端使用鼠标操作，操作包含滑动、左击、右击、双击操作，操作相对来说单一，交互效果相对较少，而对于手机端来说，包含手指操作点击、滑动、双击、双指放大、双指缩小、...
canvas应用之刮刮乐实现
学习随笔
04-11 522
<!DOCTYPE html> <html> <head> <title>刮刮乐</title> </head> <body> <canvas id="can" width="500" height="500"></canvas> <script type="text/javas...
刮刮卡 vue canvas
qq_42042787的博客
10-30 1054
效果如下： <template> <div class="canvas-content"> <div id="content" class="canvas-container-vertical"> <img src="../img/test.jpg" alt="" id="lapm"> <canvas id="signCanvas"></canvas>
canvas 实现刮刮乐
小皮咖的博客
10-15 4593
提出问题 在一个电商网站上如何实现刮刮乐的效果？ 实现思路 用HTML5 的 canvas 标签画图 在解决问题前，我们先来了解一下 canvas 标签canvas 是 html5 出现的新标签，像所有的 dom 对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js 能够调用它来进行绘图。context是一个封装了很多绘图功能的对象，获取这个对象的方法是 :var canvas
vue插件实现刮刮乐效果（移动端、PC端）
Kino的博客
05-26 2973
效果 使用方法 1、使用npm下载安装插件 npm install lzy-scratch-card --save 2、在需要使用的页面引入组件 import scratchCard from 'lzy-scratch-card' components: { scratchCard }, 3、在项目中使用 <template> <div class="index-body"> <scratch-card elem
pc端和移动端自适应
10-14
PC端和移动端自适应是指网站或应用程序能够根据用户的设备和屏幕大小自动调整展示效果和布局。在现代互联网时代，用户的访问终端多种多样，包括桌面电脑、笔记本电脑、平板电脑和智能手机等。为了让用户在不同设备上都能良好地浏览和使用网站或应用程序，开发者们需要考虑到不同设备的特点和差异。 PC端和移动端自适应的实现方式主要有两种。一种是响应式网页设计（Responsive Web Design，简称RWD），它通过使用HTML5和CSS3等技术，在同一个网页的基础上根据屏幕大小和分辨率不同，调整页面元素和布局的显示效果。这种方式可以让网站在不同设备上表现一致，但同时也会增加开发的复杂度。 另一种方式是通过使用服务器端技术，根据用户访问设备的不同，返回不同的HTML和CSS文件。这种方式可以根据不同的设备提供不同的布局和功能，但也需要维护多个版本的网页，并增加了服务器端的压力。 PC端和移动端自适应的好处是可以提供更好的用户体验和用户界面，让用户在不同设备上都能方便快捷地获取信息和进行操作。同时，也可以提高网站的可用性和搜索引擎优化效果，增加网站的流量和用户粘度。 总之，PC端和移动端自适应是现代网页设计和应用开发的重要要求，它可以让用户在不同设备上都能获得良好的体验，并为开发者带来更多的机会和挑战。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值