canvas写刮刮乐

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding:0;
           }
           #box{
               border: 1px solid red;
               position: absolute;
               z-index: 666;
           }
           #kuan{
               height: 100px;
               width: 200px;
               text-align: center;
               line-height: 100px;
               position: absolute;
           }

       </style>
   </head>
   <body>
       <canvas id="box" width="200" height="100"></canvas>
       <div id="kuan"></div>
   </body>
   <script type="text/javascript">
       //创建画布和画笔
       var cav=document.getElementById("box");
       var ctx = cav.getContext("2d");
       ctx.beginPath();
       ctx.fillStyle="#999"
       ctx.fillRect(0,0,cav.width,cav.height);
       ctx.closePath()

//画布上写字

ctx.beginPath();
       ctx.font="bold 60px 微软雅黑"
       ctx.strokeStyle="#0000FF"
       ctx.strokeText("刮刮乐",10,70)
       ctx.closePath()

   //奖项框设置随机奖项

       var kuan = document.getElementById("kuan");

       var arr=["玩具卡车","大奔一辆","再来一瓶","500万"];

       var i=Math.floor(Math.random()*arr.length);

       kuan.innerHTML=arr[i]

       //清除画布上的颜色,查看奖项
       cav.onmousedown=function(){
           document.onmousemove=function(e){

               ctx.clearRect(e.clientX-cav.offsetLeft,e.clientY-cav.offsetTop,10,10)
           }
           document.onmouseup=function(){
               document.onmousedown=null
               document.onmousemove=null

           }
       }

   </script>
</html>

猜你喜欢