canvas绘制刮刮卡效果
程序员文章站
2022-07-06 14:55:08
本文实例为大家分享了canvas绘制刮刮卡效果的具体代码,供大家参考,具体内容如下先上图代码
本文实例为大家分享了canvas绘制刮刮卡效果的具体代码,供大家参考,具体内容如下
先上图
代码
<!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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 双皮奶做好要放冰箱吗