好资源导航 » 文章资讯 » canvas绘制刮刮卡效果

canvas绘制刮刮卡效果

2023-07-04 14:39:35 73

本文实例为大家分享了canvas绘制刮刮卡效果的具体代码，供大家参考，具体内容如下

先上图

代码







刮刮卡


*{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);}







vardiv=document.getElementsByTagName('div')[0];
varcanvas=document.getElementsByTagName('canvas')[0];
varcontext=canvas.getContext("2d");

varJackpots=["一等奖","二等奖","三等奖","四等奖","奖励奖"];
//一等奖概率2%二等奖概率6%三等奖概率14%四等奖概率30%奖励奖概率48%
varJackpot=rand(0,49);
if(Jackpot==0){
div.innerHTML=Jackpots[0];
}elseif(Jackpot>0&&Jackpot<4){
div.innerHTML=Jackpots[1];
}elseif(Jackpot>3&&Jackpot<11){
div.innerHTML=Jackpots[2];
}elseif(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='30pxArial';
context.fillStyle="rgb(255,255,255)"
context.fillText("刮刮卡",110,90);
context.fill();
context.closePath();

varfillColor=["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(vari=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();
}

varflag=false;
canvas.onmousedown=function(){
flag=true;
}

canvas.onmouseup=function(){
flag=false;
}

canvas.onmousemove=function(){
if(flag){
vare=event||window.event;
varx=e.clientX-parseInt(div.offsetLeft);
vary=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的一个整数
functionrand(n,m){
varc=m-n+1;
returnMath.floor(Math.random()*c+n);
}

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

canvas绘制刮刮卡效果

热门推荐

随机推荐