好资源导航 » 文章资讯 » js+canvas实现刮刮奖功能

js+canvas实现刮刮奖功能

2023-07-16 19:13:03 70

本文实例为大家分享了js+canvas实现刮刮奖的具体代码，供大家参考，具体内容如下

1.实现了PC端的刮刮奖效果

2.使用了canvas的文本，像素操作，合成，绘制图形，随机数






刮刮奖

*{
margin:0;
padding:0;
}

.box{
width:500px;
height:500px;
margin:0auto;
position:relative;
background:#00BFFF;
}

#prize{
width:300px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px00-150px;
background:#fff;
font-family:"微软雅黑";
font-size:40px;
text-align:center;
line-height:100px;
-webkit-user-select:none;
}

#myCanvas{
position:absolute;
top:50%;
left:50%;
margin:-50px00-150px;
}

//获取对象 vartextArr=["一等奖","二等奖","三等奖","谢谢惠顾","再来一次"]; varprize=document.getElementById("prize"); varnum=Math.random()*100; if(num<=60){ prize.innerText=textArr[3]; }elseif(num<=70){ prize.innerText=textArr[4]; }elseif(num<=80){ prize.innerText=textArr[2]; }elseif(num<=90){ prize.innerText=textArr[1]; }elseif(num<=100){ prize.innerText=textArr[0]; } varmyCanvas=document.getElementById("myCanvas"); //搭建环境 varcxt=myCanvas.getContext("2d"); cxt.globalAlpha=1; cxt.fillStyle="#ccc"; cxt.fillRect(0,0,300,100); vartxt="刮刮奖"; cxt.fillStyle="#000"; cxt.font="30px微软雅黑"; cxt.textAlign="center"; cxt.textBaseline="middle"; cxt.fillText(txt,150,50,300); varmX,mY; varflag=false; myCanvas.onmousedown=function(e){ flag=true; mX=e.offsetX; mY=e.offsetY; drawArc(mX,mY); } document.body.onmousemove=function(e){ if(flag==true){ mX=e.offsetX; mY=e.offsetY; drawArc(mX,mY); } } document.body.onmouseup=function(){ flag=false; sayPrize(); } functiondrawArc(x,y){ cxt.globalCompositeOperation="destination-out";//相交部分不显示 cxt.beginPath(); cxt.fillStyle="white"; cxt.moveTo(x,y); cxt.arc(x,y,10,0,2*Math.PI); cxt.fill(); } functionsayPrize(){ varmyImg=cxt.getImageData(70,30,160,40); //varmyImg=cxt.getImageData(93,37,40,30); //设置像素点的颜色 varnum=0; varmax=myImg.data.length/4; for(vari=0;i=max*0.6){ alert("恭喜您,获得："+prize.innerText); } }

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

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

返回顶部
514930285
czq8825@qq.com

js+canvas实现刮刮奖功能

热门推荐

随机推荐