canvas案例二刮刮乐抽奖开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

code.juejin.cn/pen/7169605…

知识点

实现起来很容易，通过本文你能了解到的知识点

文本，矩形的画法
监听鼠标事件，或者移动端的touch事件

onmousedown鼠标按下的事件。 onmouseup鼠标松开，onmousemove 鼠标移动的时间 touchxxx类似。本文关键重要的是 onmouseup事件需要在document上面，因为可能出现点按到刮刮卡外面在松开，然后非点按状态进入夸夸卡区域，onmousemove事件继续执行

globalCompositeOperation 也是本文的刮刮乐实现的关键的关键具体用法参见

如下图源图像是蓝色正方形，目标图像是红色圆，各个属性的效果如图。

完整html代码，可直接复制后运行。

<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>canvas</title>
    <style>
        canvas {
            box-shadow: 0px 0px 5px #ccc;
            border-radius: 8px;
        }

        .lottery {
            width: 400px;
            height: 150px;
            position: relative;

        }

        #canvas_lottery,
        .lottery-result {
            position: absolute;
            width: 100%;
            height: 100px;
            left: 0;
            top: 30px;
            text-align: center;
            font-size: 25px;
            line-height: 100px;
            color: #f00;
        }

        .lottery-result {
           // ***关键代码，让canvas在文本上面***
            z-index: -1;
        }
    </style>
</head>
<body>

    <div id="app">
   
        <div class="lottery">
            <canvas id="canvas_lottery" width="400" height="100"></canvas>
            <div class="lottery-result">恭喜中奖了</div>
            <button onclick="refreshResult()">再来一次</button>
        </div>
    </div>

    <script>

  const canvasLottery = document.getElementById('canvas_lottery')
        const ctx_l = canvasLottery.getContext('2d')
        let isDraw = false
        refreshResult()
        canvasLottery.onmousedown = function () {
            isDraw = true
        }
        // canvasLottery.ontouchstart= function() {
        //     isDraw = true
        // }
        canvasLottery.onmousemove = function (e) {
            if (isDraw) {
                const x = e.pageX - canvasLottery.offsetLeft
                const y = e.pageY - canvasLottery.offsetTop
                ctx_l.beginPath();
                ctx_l.globalCompositeOperation = 'destination-out'
                //CanvasPath.arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
                ctx_l.stroke
                ctx_l.arc(e.offsetX, e.offsetY, 15, 0, 2 * Math.PI)
                ctx_l.fill()
                ctx_l.closePath();


            }

        }
        document.onmouseup = function () {
            isDraw = false
        }
        function refreshResult() {
        // 刷新后重新绘制
            ctx_l.clearRect(0, 0, 400, 100)
            ctx_l.restore();
            ctx_l.fillStyle = 'darkgray'
            ctx_l.fillRect(0, 0, 400, 100)
            ctx_l.font = '20px 微软雅黑 '
            ctx_l.textAlign = 'center'
            ctx_l.fillStyle = '#fff'
            ctx_l.save();
            ctx_l.fillText('刮刮卡', 190, 55)
            const resultLottery = document.getElementsByClassName('lottery-result')[0]
            const result = ['毛豆y一台', '小米电视机一台', '小米电饭煲', '天猫精灵一台', '购物卡50元', '祝您好运']
            // 通过随机值*5获取0到5的随机值，然后随机奖品选项。
            resultLottery.innerHTML = result[Math.round(Math.random() * 5)]
        }
            </script>

    <!-- built files will be auto injected -->
</body>

</html>

canvas案例二 刮刮乐抽奖

知识点

canvas案例二刮刮乐抽奖