canvas 刮刮乐(2021/5/9)

最新推荐文章于 2024-03-01 21:00:00 发布

叶川飞流

最新推荐文章于 2024-03-01 21:00:00 发布

阅读量508

点赞数

分类专栏： canvas学习

本文链接：https://blog.csdn.net/weixin_41033048/article/details/116567710

版权

canvas学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

设置内容叠层的属性

ctx.globalCompositeOperation = 'xor'

案例

<!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>刮刮乐</title>
        <style>
                * {
                        margin: 0;
                        padding: 0;
                }

                .content {
                        width: 400px;
                        height: 150px;
                        text-align: center;
                        line-height: 150px;
                        color: red;
                        font-size: 40px;
                        user-select: none;

                }

                #canvas {
                        position: absolute;
                        left: 0;
                        top: 0;
                }
        </style>
</head>

<body>
        <div class="content">谢谢惠顾</div>
        <canvas id="canvas" width="400" height="150"></canvas>

        <script>
                var canvas = document.querySelector('#canvas')
                var content = document.querySelector('.content')

                var ctx = canvas.getContext('2d');
                ctx.fillStyle = 'darkgrey'
                ctx.fillRect(0, 0, 400, 150)
                ctx.fill()
                ctx.font = '25px 微软雅黑'
                ctx.fillStyle = 'white'
                ctx.fillText('刮刮乐', 170, 80)
                ctx.fill()

                var isClick = false

                canvas.onmousedown = function (e) {
                        isClick = true;
                }
                canvas.onmouseup = function (e) {
                        isClick = false;
                }
                canvas.onmousemove = function (e) {
                        if (isClick) {
                                var x = e.pageX - content.offsetLeft //计算鼠标位置X到内容左侧的边距差值
                                var y = e.pageY - content.offsetTop  //计算鼠标位置Y到内容顶部的边距差值
                                ctx.globalCompositeOperation = 'destination-out' //两个矩形拼接的处理方式
                                ctx.arc(x, y, 20, 0, 2 * Math.PI)
                                ctx.fill()
                        }
                }

                var jiangpin = [
                        { a: '一等奖：iphoneX', p: 0.1 },
                        { a: '二等奖：ipad', p: 0.2 },
                        { a: '三等奖：iwatch', p: 0.3 }
                ]

                function getAward(obj) {
                        // 获取随机数
                        var randomNum = Math.random()
                        var name = Object.keys(obj[0])[0] //获取第一个的key值
                        var probability = Object.keys(obj[0])[1]//获取第二个的key值
                        if (randomNum < obj[0][probability]) {
                                content.innerHTML = obj[0][name]
                        } else if (randomNum < (obj[0][probability] + obj[1][probability])) {
                                content.innerHTML = obj[1][name]
                        } else if (randomNum < (obj[0][probability] + obj[1][probability] + obj[2][probability])) {
                                content.innerHTML = obj[2][name]
                        }
                }

                getAward(jiangpin);

        </script>
</body>

</html>