findjh | 找到我啦!

<!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>
    <style>
        #ggk {
            width: 400px;
            height: 100px;
            position: relative;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .jp,
        canvas {
            position: absolute;
            width: 400px;
            height: 100px;
            left: 0;
            top: 0;
            text-align: center;
            font-size: 25px;
            line-height: 100px;
            color: deeppink;
        }
    </style>
</head>

<body>
    <div id="ggk">
        <div class="jp">不抽大嘴巴子</div>
        <canvas id="canvas" width="400" height="100"></canvas>
    </div>
</body>

</html>
<script>
    let canvas = document.querySelector('#canvas');
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = "darkgray";
    ctx.fillRect(0, 0, 400, 100);

    let isDraw = false;
    canvas.onmousedown = function () {
        isDraw = true;
    }
    let ggkDom = document.querySelector('#ggk');
    let jp = document.querySelector('.jp');
    canvas.onmousemove = function (e) {
        if (isDraw) {
            console.log(e.pageX, 'e.pageX')
            console.log(ggkDom.offsetLeft, 'ggkDom.offsetLeft') // left: 50%;
            console.log(ggkDom.offsetWidth, 'ggkDom.offsetWidth') // transform: translate(-50%, 0);
            let x = e.pageX - ggkDom.offsetLeft + ggkDom.offsetWidth / 2;
            let y = e.pageY - ggkDom.offsetTop;
            ctx.beginPath();
            ctx.arc(x, y, 10, 0, 2 * Math.PI);
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fill();
            ctx.closePath();
        }
    }
    document.onmouseup = function () {
        isDraw = false;
    }


    let arr = [
        { content: '一等奖：一个大嘴巴子', p: 0.1 },
        { content: '二等奖：两个大嘴巴子', p: 0.2 },
        { content: '三等奖：三个大嘴巴子', p: 0.3 }
    ];
    let sj = Math.random();
    if (sj < arr[0].p) {
        jp.innerHTML = arr[0].content;
    } else if (sj < arr[1].p) {
        jp.innerHTML = arr[1].content;
    } else if (sj < arr[2].p) {
        jp.innerHTML = arr[2].content;
    }
</script>