原生JS实现Canvas刮刮乐

Canvas刮刮乐

<canvas id="canvas" width="300" height="150"></canvas>
<div class="prize">谢谢惠顾</div>
<button id="brush">刷新</button>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas {
            position:absolute;
            z-index: 2;
            border: 1px solid red
        }
        .prize {
            width: 300px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            font-size: 30px;
            color: reds
        }
</style>

window.onload=function(){
        var canvas = document.querySelector('#canvas')
        var ctx = canvas.getContext('2d') //绘制图形
        ctx.beginPath() //开始路径
        ctx.fillStyle='#ccc'
        ctx.fillRect(0,0,300,150)
        ctx.closePath(); //关闭路径
        //按下事件
        canvas.onmousedown= function (event) {
            // 移动事件
            canvas.onmousemove= function (event) { //event是一个对象，表示事件的状态
                var x=event.clientX; //与X轴距离
                var y=event.clientY; //与Y轴距离
                //清除绘制
                ctx.clearRect(x,y,30,30)
            }
        }
        //松开事件
        canvas.onmouseup= function (event) {
            canvas.onmousemove = null //清除事件
        }
        //中奖信息
        var data = ['一个亿','豪华济州岛双人游','iPhone手机一部','谢谢惠顾']
        var prize = document.querySelector('.prize')
        var i = Math.floor(Math.random()*data.length) // 随机数
        // console.log(i)
        prize.innerText = data[i]

        //Math.random()随机数 0-1
        //Math.floor() 向下取整  0.1/0  0.6/0 1.6/1  -5.1/-6

        var btn = document.querySelector('#brush')
        btn.onclick = function (params) {
            window.location.reload()
        }
    }