原生js html5 canvas制作刮刮乐 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             *{
 8                 padding: 0;
 9                 margin: 0;
10             }
11             #cvs{
12                 border: 1px solid #222222;
13             }
14             #con{
15                 width:300px;
16                 height:200px;
17                 text-align: center;
18                 line-height: 200px;
19                 color:red;
20                 font-size: 30px;
21                 font-weight: bold;
22                 position: absolute;
23                 left: 0;
24                 top:0;
25                 z-index: -1;
26             }
27         </style>
28     </head>
29     <body>
30         <canvas id='cvs' width='300' height='200'></canvas>
31         <div id="con"></div>
32     
33     </body>
34     <script>
35         var cvs=document.getElementById("cvs");
36         var ctx=cvs.getContext('2d');
37         var btn=document.getElementById("btn")
38         var con=document.getElementById("con")
39         var arr=['谢谢惠顾','一百万现金','一等奖','二等奖','笔记本']
40         var i=Math.floor(Math.random()*arr.length)
41         con.innerHTML=arr[i]
42         ctx.beginPath()
43         ctx.fillStyle='black'
44         ctx.fillRect(0,0,300,200)
45         ctx.closePath()
46     
47         cvs.onmousedown=function(e){
48                 var event=e||event;
49             }
50             document.onmousemove=function(e){
51                 var event=e||event;
52                ctx.clearRect(event.clientX-cvs.offsetLeft,event.clientY-cvs.offsetTop,10,10)
53             }
54                 
55             document.onmouseup=function(){
56                 document.onmousedown=null
57                 document.onmouseup=null
58         }
59     
60     </script>
61 </html>

 

posted @ 2017-06-13 21:00  wyh243  阅读(446)  评论(2)  编辑  收藏  举报