JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

canvas绘制刮刮卡效果

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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 &amp;& 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的canvas绘制刮刮卡效果全部内容，希望文章能够帮你解决canvas绘制刮刮卡效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：canvascanvas
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程