刮刮乐，带适配的效果

最新推荐文章于 2023-11-29 10:54:48 发布

NewMyLife

最新推荐文章于 2023-11-29 10:54:48 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/NewMyLife/article/details/104560812

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f2f2f2;
        }

        html {
            font-size: 100px;
        }

        div,
        canvas {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 5rem;
            height: 5rem;
            margin: 0.2rem auto;
        }

        @media (max-width:767px) {
            .box {
                max-width: 2rem;
                max-height: 2rem;
            }
        }

        .jianxian {
            position: absolute;
            z-index: 0;
            text-align: center;
            max-width: 100%;
            color: #000;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            font-size: 0.1rem;
            text-align: center;
        }

        #canvas {
            position: absolute;
            z-index: 100;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            max-width: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="jianxian">谢谢惠顾</div>
        <canvas id="canvas"></canvas>
    </div>
</body>
<script>
    (function (doc, win) {
        var resetPage = function () {
            var deviceWidth = doc.documentElement.clientWidth;
            var scale = deviceWidth / 640;
            if (deviceWidth >= 640) {
                doc.documentElement.style.fontSize =
                    '100px';
            } else {
                doc.documentElement.style.fontSize =
                    scale * 100 + 'px';
            }
        }
        if (!doc.addEventListener) return;
        doc.addEventListener('DOMContentLoaded', resetPage, false);
        win.addEventListener('resize', resetPage, false);
    })(document, window)
    //** 获取一个随机的奖项；
    function getRandom() {
        var jianLi = "一等奖,二等奖,三等奖,特等奖,谢谢惠顾".split(",");
        shu = Math.floor(Math.random() * jianLi.length);
        return jianLi[shu];
    }
    /*  奖项开始发生改变*/
    function gaiBian() {
        var jianxiang = document.querySelector(".jianxian"),
            jianli = getRandom();
        jianxiang.innerText = "";
        jianxiang.innerText = jianli;
    }
    // 浏览器刷新完毕后，判断是否是pc端
    window.addEventListener("load", function () {
        gaiBian(); //奖项开始改变 ;
        Huise();// 旧的灰色的底色
    }, false);
    //浏览器大小改变后刷新浏览器
    window.addEventListener("resize", function () {
        location.reload();
    }, false);
    // 旧的灰色的底色
    function Huise() {
        var canvas = document.querySelector("#canvas"),
            context = canvas.getContext("2d"),
            w = canvas.width,
            h = canvas.height,
            grd = context.createLinearGradient(0, 0, 500, 500);

        grd.addColorStop(0, "#f0f");
        grd.addColorStop(0.5, "#ff0");
        grd.addColorStop(1, "#00f");
        context.beginPath();
        context.fillStyle = grd;
        context.fillRect(0, 0, w, h);
        context.closePath();

        /*开始判断是pc端，还是移动端*/
        pandunPc();

    }
    /*开始判断是pc端，还是移动端*/
    function pandunPc() {
        var user = window.navigator.userAgent,
            pc = user.indexOf("Android") == -1;
        if (pc) {
            return getPcClick();
        } else {
            return getYidonClick();
        }
    }
    /*pc发生的事情
    */
    function getPcClick() {
        var context = canvas.getContext("2d"),
            l = canvas.getBoundingClientRect().left,
            t = canvas.getBoundingClientRect().top;
        canvas.onmousedown = function (ev) {
            var x1 = ev.clientX - l,
                y1 = ev.clientY - t;
            context.beginPath();
            context.globalCompositeOperation = 'destination-out';
            context.arc(x1, y1, 15, 0, Math.PI * 2, 0);
            context.fillStyle = "#000";
            context.fill();
            context.closePath();
            canvas.onmousemove = function (ev) {
                var x2 = ev.clientX - l,
                    y2 = ev.clientY - t;
                context.beginPath();
                context.arc(x2, y2, 15, 0, Math.PI * 2, 0);
                context.fillStyle = "#000";
                context.fill();
                context.closePath();
            };
            canvas.onmouseup = function () {
                canvas.onmousedown = null;
                canvas.onmousemove = null;
                getPcClick();
            }
        }
    }
    //移动端发生的事情；
    function getYidonClick() {

        var context = canvas.getContext("2d"),
            l = canvas.getBoundingClientRect().left,
            t = canvas.getBoundingClientRect().top;

        canvas.ontouchstart = function (ev) {
            console.log(ev);
            var x1 = ev.touches[0].clientX - l,
                y1 = ev.touches[0].clientY - t;
            context.beginPath();
            context.globalCompositeOperation = 'destination-out';
            context.arc(x1, y1, 10, 0, Math.PI * 2, 0);
            context.fillStyle = "#000";
            context.fill();
            context.closePath();
            canvas.ontouchmove = function (ev) {
                var x2 = ev.touches[0].clientX - l,
                    y2 = ev.touches[0].clientY - t;
                context.beginPath();
                context.arc(x2, y2, 10, 0, Math.PI * 2, 0);
                context.fillStyle = "#000";
                context.fill();
                context.closePath();
            };

            canvas.ontouchend = function () {
                canvas.ontouchstart = null;
                canvas.ontouchmove = null;
                getYidonClick();
            }
        }
    }


</script>

</html>

NewMyLife

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
刮刮乐，带适配的效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
复制链接

扫一扫