canvas绘制刮刮卡效果
更新时间:2021年3月7日 23:25 点击:2355
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
下一篇: JavaScript快速实现日历效果
相关文章
- 这篇文章主要为大家详细介绍了js canvas实现滑块验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
JavaScript+html5 canvas绘制的小人效果
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下...2016-01-29JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
这篇文章主要介绍了JS基于ocanvas插件实现的简单画板效果,结合实例形式分析了ocanvas插件实现画板的相关技巧,并附代码demo源码供读者下载参考,需要的朋友可以参考下...2016-04-06- 这篇文章主要给大家介绍了关于微信小程序对图片进行canvas压缩的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-12
- 这篇文章主要为大家详细介绍了js canvas仿支付宝芝麻信用分仪表盘,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-11-22
- 这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-08
- 这篇文章主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了Canvas实现放大镜效果完整案例分析(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
html+css+js实现canvas跟随鼠标的小圆特效源码
这篇文章主要介绍了html+css+js实现canvas跟随鼠标的小圆特效源码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-15- 这篇文章主要为大家详细介绍了原生js canvas实现鼠标跟随效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-02
- 这篇文章主要介绍了JS使用canvas技术模仿echarts柱状图,对canvas感兴趣的同学,可以参考下...2021-04-30
- 这篇文章主要为大家详细介绍了js canvas实现圆形流水动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-19
- 这篇文章主要为大家详细介绍了canvas绘制刮刮卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-07
- 对于生成缩略图一般做法是通过后端语言php等来生成,但是为了给服务器减压,我们或许可以从前端来着手,先生成好不同尺寸的缩略图,传给后端,而后端只需要将前端传过来的图片进行存储就好了...2020-10-03
- 这篇文章主要介绍了JS+canvas五子棋人机对战实现步骤详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-05
HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)
这篇文章主要介绍了HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-25基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
大转盘中奖概率算法在我们的日常生活中,经常遇到,那么基于php代码是如何实现中奖概率算法的,下面通过一段代码实例给大家介绍php中奖概率算法...2015-12-22- 这篇文章主要为大家详细介绍了javascript利用canvas实现鼠标拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-24
- 本文给大家介绍基于JS+Canvas 实现下雨下雪效果,效果非常逼真,适应于各大网站,需要的朋友可以参考下...2016-05-20
- 这篇文章主要为大家详细介绍了javascript使用canvas实现饼状图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-08