「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」

思路：绘制一个矩形canvas遮罩层为其这是background覆盖在咱们的随机数字之下，通过globalCompositeOperation属性可以很方便的操作绘图间的关系

（globalCompositeOperation即Canvas中的合成操作）

1、source-over这是默认值，他表示绘制的图形将画在现有画布之上
2、destination-over这个操作的值与前一个值相反，所以现在目标绘制在源之上
3、source-atop这个操作会将源绘制在目标之上，但是在重叠区域上两者都是不透明的。绘制在其他位置的目标是不透明的，但源是透明的。
4、destination-atop这个操作与source-atop相反，目标绘制在源之上
5、source-in在源于目标重叠的区域只绘制源，而不重叠的部分编程透明的。
6、destination-in这个操作与source-in相反，在源于目标重叠的区域保留目标。而不重叠的部分都变成透明的。
7、source-out在与目标不重叠的区域上绘制源，其他部分都变成透明的。
8、lighter这个值与顺序无关，如果源与目标重叠，就将两者的颜色值想家。得到的颜色值的最大取值为255，结果就为白色。
9、copy这个值与顺序无关，只绘制源，覆盖掉目标。
10、xor这个值与顺序无关，只绘制出不重叠的源与目标区域。所有重叠的部分都变成透明的

案例：

css样式如下

 * {
        margin: 0;
        padding: 0;
    }

    #text {
        position: absolute;
        left: 140px;
        top: 35px;
        z-index: -1;
    }

html，简简单单写个canvas即可

<canvas id="canvas" width="400" height="100"></canvas>
    <div id="text">100</div>

     const figure=document.getElementById('text')
        const canvas=document.getElementById('canvas')
        const ctx=canvas.getContext('2d')
        ctx.fillRect(0,0,400,100)
        ctx.fillStyle='#fff'
        ctx.fillText('..',180,50)
        let isDraw=false
        canvas.onclick=function(){
            console.log(figure);
            figure.innerHTML='抽中'+1000000
            console.log(figure.innerHTML);
        }
        canvas.onmousedown=function (){
            isDraw=true
        }
        canvas.onmousemove=function (e){
            if(!isDraw) return
            const x=e.pageX-canvas.offsetLeft
            const y=e.pageY-canvas.offsetTop
            ctx.globalCompositeOperation='destination-out'
            ctx.arc(x,y,10,0,2*Math.PI)
            ctx.fill()
        }
        canvas.onmouseup=function (){}
        isDraw=false
        fetch('http://localhost:8080/input')
        .then(response=>response.json())
        .then(result=>{
            console.log(result);
        })
        ste='ahsuqhuw`1233hksdwi585dqwqg80-12'
        let paySign = md5(str).toUpperCase()
        console.log(paySign);

用canvas做一个简单的刮刮卡

案例：