canvas生成刮刮乐~~~

最新推荐文章于 2022-05-25 20:08:05 发布

最帅扫地僧

最新推荐文章于 2022-05-25 20:08:05 发布

阅读量198

点赞数

分类专栏： html js 文章标签： canvas

本文链接：https://blog.csdn.net/weixin_42259266/article/details/106832384

版权

js 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

html

17 篇文章 1 订阅

订阅专栏

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 100px;
            border: 1px solid #ccc;
            position: absolute;
            z-index: -1;
            font-size: 26px;
            text-align: center;
            line-height: 100px;
            font-style: italic;
            font-weight: 700;
            color: coral;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <canvas id="canvas"></canvas>
    <script>
        let canvas = document.getElementById('canvas')
        let ctx = canvas.getContext('2d')

        ctx.rect(1, 1, 200, 100);
        ctx.fillStyle = '#ccc';
        ctx.fill();

        canvas.onmousedown = function(e) {
            console.log(e)
            canvas.onmousemove = function(e) {
                ctx.clearRect(e.clientX, e.clientY, 8, 8);
            }
        }

        canvas.onmouseup = function() {
            canvas.onmousemove = null;
        }

        // 随机给box内部生成标签
        const tags = ["谢谢惠顾", "一个亿", "美女一个", "豪车一辆", "别墅一栋", "拖拉机一辆", "谢谢惠顾", "Mac笔记本"];
        const box = document.querySelector(".box");
        let random = Math.floor(Math.random() * (tags.length));
        if (random === 1) { // 注意哦，一个亿...还上个啥子班哦...
        	random = 0; // 空欢喜一场...套路太深...
        }
        box.innerHTML = tags[random];
    </script>
</body>
</html>