JS高阶-刮刮乐

最新推荐文章于 2024-06-12 12:52:53 发布

世阿弥

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量223

点赞数

分类专栏： JavaScript 文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_46696109/article/details/123238009

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./包图小白体的副本.ttf">
    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-size: 30px;
        }
        @font-face {
            font-family: 'Regular';
            src: url(./包图小白体的副本.ttf);
        }

        div {
            width: 500px;
            border: 1px solid;
            margin: 0 auto;
            position: relative;
        }

        li {
            width: 50px;
            height: 50px;
            list-style: none;
            line-height: 50px;
            text-align: center;
            font-family: 'Regular';
        }

        p{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: right;
            font-family: 'Regular';
        }

        ul {
            display: flex;
            justify-content: center;
        }
        h1{
            text-align: center;
            font-family: 'Regular';
        }
        #canvas{
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">
        <canvas id="canvas" width="500" height="540"></canvas>
    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
        function render() {
            for (let i = 0; i < 3; i++) {
                let str = '';
                let ul = document.createElement('ul');
                for (let j = 0; j < 9; j++) {
                    console.log(123);
                    str += `<li>${_.random(1, 54)}</li>`
                    ul.innerHTML = str;
                    ul.innerHTML += `<p>$${_.random(20, 100)}</p>`
                }
                box.appendChild(ul)
            }

            for (let i = 0; i < 8; i++) {
                let str = '';
                let ul = document.createElement('ul');
                for (let j = 0; j < 7 - i; j++) {
                    console.log(123);
                    str += `<li>${_.random(1, 54)}</li>`
                    ul.innerHTML = str;
                    ul.innerHTML += `<p>$${_.random(20, 100)}</p>`
                }
                box.appendChild(ul)
            }
            let h1 = document.createElement('h1');
            h1.innerHTML += `<h1>中奖号码是:${_.random(1,54)}</h1>`
            box.appendChild(h1)
        }
        render();

        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');
        //画蒙布
        context.beginPath();
        context.fillStyle = 'grey'
        context.fillRect(0, 0, 575.511, 650);
        //鼠标按下开刮
        canvas.onmousedown = function () {
            canvas.onmousemove = function () {
                //获取鼠标坐标
                var x = event.clientX;
                var y = event.clientY;
                context.globalCompositeOperation = "destination-out";
                context.beginPath();
                context.arc(x - 360, y,30, 0, Math.PI * 2);
                context.fill();
            }
        }
        //鼠标抬起不刮开
        canvas.onmouseup = function () {
            canvas.onmousemove = function () {
            }
        }
    </script>
</body>

</html>

世阿弥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS高阶-刮刮乐

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫