转盘抽奖范例

zhgc · 发表于 2022-8-19 23:01:36

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0}
#can{ background:#F2F2F2}
</style>
<body>
<canvas id="can" width="800" height="800"></canvas>
</body>
<script>
zpFun();
function zpFun(){
var canid=document.getElementById("can");
var cans=canid.getContext("2d");
var deg=Math.PI/180;
var colorArr=["#6D7278","#B55610","#349933","#CC3333","#2C3144","#B12E3D","#FFE44C","#41547F"];
var textArr=["javascript","photoshop","css3","html5","mysql","php","java","dreamweaver"];
var arg=0;
var step=50+50*Math.random();
cans.translate(300,350);
//cans.strokeStyle="#000000";
var t=setInterval(function(){
step*=0.95;
if(step<=0.2){
clearInterval(t);
var snum=Math.ceil(arg/45);
var con=textArr[textArr.length-snum];
//cans.beginPath();
//cans.font="14px 微软雅黑";
//cans.textAlign="center";
//cans.fillText(textArr[textArr.length-snum],0,0);
cans.font="20px Arial";
cans.fillStyle="#cc0000";
cans.textAlign="center";
cans.fillText(con,0,0);
return;
}else{
if(arg>=360){
arg=0;
}
}
arg=arg+step;
cans.clearRect(-500,-500,1300,1300);
//画指针
cans.beginPath();
cans.lineWidth=10;
cans.moveTo(230,0);
cans.lineTo(300,0);
cans.stroke();
// //画扇形
cans.save();
cans.rotate(arg*deg);
cans.lineWidth=1;
for(var i=0;i<8;i++){
cans.beginPath();
cans.fillStyle=colorArr[i];
cans.moveTo(0,0);
cans.arc(0,0,200,i*45*deg,(i+1)*45*deg);
cans.closePath();
cans.fill();
cans.stroke();
}
// //画中心园
cans.beginPath();
cans.fillStyle="#ffffff";
cans.arc(0,0,50,0,360*deg);
cans.fill();
//写文字
for(var i=0;i<8;i++){
cans.save();
cans.beginPath();
cans.rotate((i*45+25)*deg);
cans.font="20px Arial";
cans.fillText(textArr[i],70,0);
cans.restore();
}
cans.restore();
},60);
}
</script>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

转盘抽奖范例

浏览过的版块