第
JS?简单实现拖拽评星的示例代码
目录一、实现效果二、总结与思考废话开篇：通过canvas简单拖拽评星，主要是通过个人的理解去实现这样的一个效果。
一、实现效果
html
div
div
canvasid=canvasheight=100/canvas
divid=score评分：0/div
/div
/div
css
.main{
display:flex;
flex-direction:row;
justify-content:start;
align-items:flex-start;
padding-top:20px;
padding-left:20px;
.score_container{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding-top:20px;
.score{
margin-top:20px;
}
js
//星星数据对象
??classPentagram{
????points=[]
????minX=0
????maxX=0
????deg=(Math.PI/180)
????score=0
????constructor(index,r,center){
??????this.savePentagramData(index,r,center)
????}
????//绘制星星
????savePentagramData(currentPentagramIndex,r,{x,y}){
??????//它对应的整数分数
??????this.score=currentPentagramIndex+1
??????//工具函数
??????letcos=(d)={returnMath.cos(d*this.deg)}
??????letsin=(d)={returnMath.sin(d*this.deg)}
??????lettan=(d)={returnMath.tan(d*this.deg)}
??????letsquare=(num)={returnMath.pow(num,2)}
??????//外边比例
??????lett=1/((1+square(tan(18)))/(3-square(tan(18))))
??????this.points=[
????????[0,1],
????????[t*cos(54),t*sin(54)],
????????[cos(18),sin(18)],
????????[t*cos(18),-t*sin(18)],
????????[cos(54),-sin(54)],
????????[0,-t],
????????[-cos(54),-sin(54)],
????????[-t*cos(18),-t*sin(18)],
????????[-cos(18),sin(18)],
????????[-t*cos(54),t*sin(54)],
????????[0,1],
??????]
??????this.points.forEach((point,index)={
????????point[0]=x+point[0]*(r/t)
????????point[1]=y+point[1]*(r/t)
????????if(index==7){
??????????//最右侧的点
??????????this.minX=point[0]
????????}
????????if(index==3){
???