刮刮乐，刮一刮效果实现

最新推荐文章于 2023-05-22 09:25:11 发布

我是小重山

最新推荐文章于 2023-05-22 09:25:11 发布

阅读量325

点赞数

分类专栏：前端页面优化 web前端

本文链接：https://blog.csdn.net/weixin_45626040/article/details/107514548

版权

前端同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

web前端

17 篇文章 0 订阅

订阅专栏

页面优化

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=0, width=device-width">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="block">
    <meta name="format-detection" content="telephone=no">
    <meta content="always" name="referrer">
    <title>周四会员日</title>
    <style>
        .box {
            border-width: 0.125rem;
            border-color: rgb(251, 234, 227);
            border-style: solid;
            border-radius: 0.55rem;
            background-color: rgb(255, 160, 76);
            box-shadow: 0px 0.25rem 0.75rem 0px rgba(255, 230, 207, 0.004),
                inset 0px 0.1rem 0.7rem 0px rgba(255, 160, 76, 0.004);

            -webkit-border-radius: 0.55rem;
            -moz-border-radius: 0.55rem;
            -ms-border-radius: 0.55rem;
            -o-border-radius: 0.55rem;
        }

        .box-title {
            width: 100%;
            height: 2.1rem;
            background: url("./img/bg4.png") no-repeat top center;
            background-size: 10.38rem 2.1rem;
            position: relative;
            top: -0.43rem;
        }

        .box-title div {
            line-height: 1;
        }

        .box-title div:nth-child(1) {
            font-size: 0.95rem;
            font-family: "Microsoft YaHei";
            color: rgb(255, 255, 255);
            font-weight: bold;
            text-align: center;
            padding-top: 0.3rem;
            padding-bottom: 0.15rem;
            line-height: 1;
        }

        .box-title div:nth-child(2) {
            font-size: 0.5rem;
            font-family: "Microsoft YaHei";
            color: rgb(255, 255, 255);
            line-height: 1;
            text-align: center;
        }

        .box-title div:nth-child(2) span {
            color: #ffdf2c;
        }

        .top5 {
            width: 18.65rem;
            height: 10.18rem;
            margin: 0.55rem auto;
            margin-bottom: 1.25rem;
        }

        .top5 .t5-1 {
            margin: 0.1rem auto;
            height: 7.07rem;
            width: 16rem;
            background: url("./img/bg8.png") no-repeat top center;
            background-size: 16rem 7.07rem;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .t5-1 .t5-1-2 {
            text-align: center;
            height: 4.25rem;
            width: 14rem;
            background: #ffdfc4;
            position: absolute;
            left: 0.97rem;
            top: 1.4rem;
        }

        .t5-1 .t5-1-2 img {
            height: 2rem;
            width: 2.4rem;
            margin-top: 0.6rem;
        }

        .t5-1 .t5-1-2 div {
            font-size: 0.75rem;
            color: #650b0d;
            margin-top: 0.25rem;
        }

        .t5-1-1 {
            display: block;
            position: absolute;
            z-index: 2;
            left: 0.97rem;
            top: 1.4rem;
            height: 4.25rem;
            width: 14rem;
        }

        .top5 .t5-1 .canv {
            position: absolute;
            z-index: 3;
            height: 4.25rem;
            width: 14rem;
            left: 0.97rem;
            top: 1.4rem;
        }
    </style>
</head>

<body>
    <div class="hy-wrapper page1">
        <div class="box top5">
            <div class="box-title">
                <div>幸运刮刮乐</div>
                <div>（机会仅限<span>1</span>次）</div>
            </div>
            <div class="flex-box t5-1">
                <img src="./img/bg9.png" class="t5-1-1 layer-img" alt="">

                <div class="t5-1-2">
                    <img src=" ./img/h4.png" alt="">
                    <div>50分钟通话时长</div>
                </div>

                <canvas class="canv"></canvas>

            </div>
        </div>
    </div>
    <script src="./js/jquery-3.2.1.min.js "></script> 
    <script>
        window.onload = function () {
            var canvasSupport = (function () {
                return !!document.createElement("canvas").getContext;
            })();
            if (canvasSupport) {
                var $canvas = $(".canv");
                var ctx = $canvas[0].getContext("2d");
                var image = $(".layer-img")[0];
                var pageTop = $canvas.offset().top;
                var pageLeft = $canvas.offset().left;
                var x, y;
                var canWidth = $canvas.width();
                var canHeight = $canvas.height();
                $canvas.attr({ width: canWidth, height: canHeight });

                ctx.drawImage(image, 0, 0, canWidth, canHeight);
                image.style = "opacity:0;z-index:0;";

                $canvas
                    .bind("touchstart", function () {
                        x = event.targetTouches[0].pageX;
                        y = event.targetTouches[0].pageY + $(".page1").scrollTop();

                        shave();
                        event.preventDefault();
                    })
                    .bind("touchmove", function (event) {
                        x = event.targetTouches[0].pageX;
                        y = event.targetTouches[0].pageY + $(".page1").scrollTop();


                        shave()
                    });

                function clearCanv() {
                    ctx.clearRect(0, 0, canWidth, canHeight);
                    $canvas.hide();
                }
                function shave() {
                    ctx.beginPath();
                    ctx.arc(x - pageLeft, y - pageTop, 15, 0, Math.PI * 2, false);
                    ctx.closePath();
                    var radgrad = ctx.createRadialGradient(
                        x - pageLeft,
                        y - pageTop,
                        3,
                        x - pageLeft,
                        y - pageTop,
                        10
                    );
                    radgrad.addColorStop(0, "rgba(255, 255, 255,1)");
                    radgrad.addColorStop(1, "rgba(255, 255, 255, 0.9)");
                    ctx.fillStyle = radgrad;
                    ctx.globalCompositeOperation = "destination-out";
                    ctx.fill(); // 填充颜色
                }
            } else {
                alert("您的浏览器不支持canvas");
            }
        };
    </script>
</body>
</html>

在这里插入图片描述

我是小重山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
刮刮乐，刮一刮效果实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, user-scalable=0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes">
复制链接

扫一扫