canvas简单刮刮乐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>刮刮乐</title>
</head>
<style>
    *{margin: 0;padding:0}
    #gua{width: 200px;height: 50px;
        position: absolute;left: 100px;top: 100px;
        text-align: center;line-height: 50px;font-size: 30px
    }
    #cvs{position: absolute;left: 100px;top: 100px;z-index: 999}

</style>
<body>
    <div id="gua">000</div>
    <canvas id="cvs" width="200" height="50" style="border:1px solid #000;"></canvas>
</body>
<script>
    
    var cvs = document.getElementById("cvs")
    var gua = document.getElementById("gua")
    var ctx=cvs.getContext("2d");
    var arr= ["一等奖","2等奖","3等奖","4等奖","5等奖","6等奖","7等奖","8等奖","9等奖","10等奖",]
    var i = Math.floor(Math.random()*arr.length)
    gua.innerHTML=arr[i]

     ctx.fillStyle="red"
     ctx.fillRect(0,0,200,50)
     
     cvs.onmousedown=function(){
        document.onmousemove = function(e){
        //   ctx.clearRect(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop,20,20)
          
            ctx.save()
            ctx.beginPath()
            ctx.cleararc(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop,20,2*Math.PI)
            ctx.clip()
            ctx.clearRect(0,0,cvs.width,cvs.height);
            ctx.restore();

        }
        document.onmouseup=function(){
            document.onmousedown=null
            document.onmousemove=null

        }
     }
     






</script>
</html>
猜你喜欢
