原生js html5 canvas制作刮刮乐

最新推荐文章于 2022-10-12 13:09:45 发布

weixin_33806914

最新推荐文章于 2022-10-12 13:09:45 发布

阅读量167

点赞数

原文链接：http://www.cnblogs.com/wyh243/articles/wyh.html

版权

 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.οnmοusedοwn=function(e){
48                 var event=e||event;
49             }
50             document.οnmοusemοve=function(e){
51                 var event=e||event;
52                ctx.clearRect(event.clientX-cvs.offsetLeft,event.clientY-cvs.offsetTop,10,10)
53             }
54                 
55             document.οnmοuseup=function(){
56                 document.οnmοusedοwn=null
57                 document.οnmοuseup=null
58         }
59     
60     </script>
61 </html>

转载于:https://www.cnblogs.com/wyh243/articles/wyh.html

weixin_33806914

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js html5 canvas制作刮刮乐

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 ...
复制链接

扫一扫