- <!DOCTYPE html>
- <html>
- <head>
- <meta name="keywords" content="风舞红枫,前端技术,canvas"/>
- <meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/>
- <meta charset="utf-8">
- <title>刮刮卡</title>
- <link rel="icon" href="../image/icon2.ico" >
- <style type="text/css">
- *{margin:0;padding:0;}
- html,body{height:100%;}
- body{overflow: hidden;}
- div{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:300px;height:150px;text-align:center;line-height:150px;background:rgb(200,0,0);color:rgb(255,255,255);font-size:22px;}
- canvas{display: block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;filter:blur(0.7px);}
- </style>
- </head>
- <body>
- <div></div>
- <canvas></canvas>
- </body>
- <script type="text/javascript">
- var div = document.getElementsByTagName('div')[0];
- var canvas = document.getElementsByTagName('canvas')[0];
- var context = canvas.getContext("2d");
-
- var Jackpots = ["一等奖","二等奖","三等奖","四等奖","奖励奖"];
- //一等奖概率2% 二等奖概率6% 三等奖概率14% 四等奖概率30% 奖励奖概率48%
- var Jackpot = rand(0,49);
- if(Jackpot == 0){
- div.innerHTML = Jackpots[0];
- }else if(Jackpot>0 && Jackpot<4){
- div.innerHTML = Jackpots[1];
- }else if(Jackpot>3 && Jackpot<11){
- div.innerHTML = Jackpots[2];
- }else if(Jackpot>10 && Jackpot<26){
- div.innerHTML = Jackpots[3];
- }else{
- div.innerHTML = Jackpots[4];
- }
-
- context.beginPath();
- context.fillStyle = "rgb(200,200,200)"
- context.moveTo(0,0);
- context.lineTo(300,0);
- context.lineTo(300,150);
- context.lineTo(0,150);
- context.lineTo(0,0);
- context.fill();
- context.closePath();
-
- context.beginPath();
- context.font = '30px Arial';
- context.fillStyle = "rgb(255,255,255)"
- context.fillText("刮刮卡", 110 , 90);
- context.fill();
- context.closePath();
-
- var fillColor = ["rgb(255,0,0,0.8)","rgb(255,255,0,0.8)","rgb(255,0,255,0.8)","rgb(0,255,255,0.8)"];
- for(var i = 0;i<50;i++){
- context.beginPath();
- context.fillStyle = fillColor[rand(0,3)];
- context.arc(rand(20,280),rand(20,130),1,0,2*Math.PI);
- context.fill();
- context.closePath();
- }
-
- var flag = false;
- canvas.onmousedown = function(){
- flag = true;
- }
-
- canvas.onmouseup = function(){
- flag = false;
- }
-
- canvas.onmousemove = function(){
- if(flag){
- var e = event || window.event;
- var x = e.clientX - parseInt(div.offsetLeft);
- var y = e.clientY - parseInt(div.offsetTop);
- //console.log(x,y);
-
- context.beginPath();
- context.arc(x,y,20,0,2*Math.PI);
- context.globalCompositeOperation="destination-out";
- context.fill();
- context.closePath();
- }
- }
-
- //随机n到m的一个整数
- function rand(n,m){
- var c = m - n + 1;
- return Math.floor(Math.random() * c + n);
- }
- </script>
- </html>