微客导航 » 文章资讯 » js+canvas实现转盘效果（两个版本）

js+canvas实现转盘效果（两个版本）

2023-07-16 18:53:04 162

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

用到了canvas的绘制，旋转，重绘操作，定时器，文本，平移，线条，圆，清理画布等等；

版本一

不可以点击，刷新旋转






转盘抽奖

#myCanvas{
background:#FAEBD7;
}







varmyCanvas=document.getElementById("myCanvas");
varcxt=myCanvas.getContext("2d");
//平移画布
cxt.translate(250,250);
//圆心坐标
varoX=0;
varoY=0;
//大圆半径
varoR=150;
//小圆半径
varoR1=50;
//弧度
varoH=Math.PI/180;
//定时器
vartimer;
//角度
varangle=0;
//文本
vartextArr=["JavaScript","jQuery","Vue","ajax","rect","angular","HTML","css"];
//颜色
varcolorArr=[];
//随机生成颜色
for(vari=0;i=360){
angle=0;
}
//处理速度
seep*=0.95;//减小速度
angle+=seep;

//画短线
cxt.beginPath();
cxt.strokeStyle="red";
cxt.lineWidth=2;
cxt.moveTo(150,0);
cxt.lineTo(180,0);
cxt.stroke();

//保存环境,旋转画布
cxt.strokeStyle="chartreuse";
cxt.save();
cxt.rotate(angle*oH);

//画扇形
for(vari=0;i<8;i++){
cxt.fillStyle=colorArr[i];
cxt.beginPath();
cxt.moveTo(0,0);
cxt.arc(0,0,150,i*45*oH,(i+1)*45*oH);
cxt.closePath();
cxt.fill();
cxt.stroke();
}

//画中心圆
cxt.fillStyle="#FFF";
cxt.beginPath();
cxt.arc(oX,oY,oR1,0,2*Math.PI);
cxt.fill();

//添加文字
for(vari=0;i

版本二

加了点击事件






转盘抽奖

#myCanvas{
background:#FAEBD7;
}







varmyCanvas=document.getElementById("myCanvas");
varcxt=myCanvas.getContext("2d");
//平移画布
cxt.translate(250,250);
//圆心坐标
varoX=0;
varoY=0;
//大圆半径
varoR=150;
//小圆半径
varoR1=50;
//弧度
varoH=Math.PI/180;
//定时器
vartimer;
//角度
varangle=0;
//文本
vartextArr=["JavaScript","jQuery","Vue","ajax","rect","angular","HTML","css"];
//颜色
varcolorArr=[];
//随机生成颜色
for(vari=0;i=360){
angle=0;
}
//处理速度
seep*=0.95;//减小速度
angle+=seep;
//画短线
cxt.beginPath();
cxt.strokeStyle="red";
cxt.lineWidth=2;
cxt.moveTo(150,0);
cxt.lineTo(180,0);
cxt.stroke();
//保存环境,旋转画布
cxt.strokeStyle="chartreuse";
cxt.save();
cxt.rotate(angle*oH);
//画扇形
for(vari=0;i<8;i++){
cxt.fillStyle=colorArr[i];
cxt.beginPath();
cxt.moveTo(0,0);
cxt.arc(0,0,150,i*45*oH,(i+1)*45*oH);
cxt.closePath();
cxt.fill();
cxt.stroke();
}
//画中心圆
cxt.fillStyle="#FFF";
cxt.beginPath();
cxt.arc(oX,oY,oR1,0,2*Math.PI);
cxt.fill();
//添加文字
for(vari=0;i

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

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

返回顶部
3162201930
czq8825@qq.com

js+canvas实现转盘效果（两个版本）

热门推荐

随机推荐