<div class="main">

<div class="score_container">

<canvas id="canvas" height="100"></canvas>

<div id="score" class="score">评分：0</div>

</div>

</div>

.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;

}

// 星星数据对象

    class Pentagram{

        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

            // 工具函数

            let cos = (d)=>{ return Math.cos(d * this.deg) }

            let sin = (d)=>{ return Math.sin(d * this.deg) }

            let tan = (d)=>{ return Math.tan(d * this.deg) }

            let square = (num)=> { return Math.pow(num,2) }

            // 外边比例

            let t = 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) {

                    // 最左侧的点

                    this.maxX = point[0]

                }

            })

        }

    }

    // 星星管理器

    class PentagramManage{

        canvas = null//画板相关

        context = null

        pentagramNum = 1//星星个数

        isMouseDown = false//鼠标是否按下

        progress = 0//当前评分位置

        pentagramRadius = 15//星星半径

        pentagramSep = 10//星星间间隔

        pentagrams = []//记录每一个星星对象

        constructor(pentagramNum){

            this.pentagramNum = pentagramNum

            this.initData()

            this.draw()

            this.bindMouseEvent()

        }

        // 初始化

        initData(){

            this.canvas = document.getElementById('canvas')

            for(let i = 0;i < this.pentagramNum;i ++){

                let pentagram =  new Pentagram(i,this.pentagramRadius,{x:35 + i * (this.pentagramRadius * 2 + this.pentagramSep),y:(this.canvas.height / 2.0) })

                this.pentagrams.push(pentagram)

                if(i == this.pentagramNum - 1){

                    this.canvas.width = pentagram.maxX + 20

                }

            }

            this.context = this.canvas.getContext('2d');

            this.context.fillStyle='white';

        }

        //绘制

        draw(){

            this.context.clearRect(0,0,this.canvas.width,this.canvas.height);

            this.drawBottomPlate()

            let hook = ()=>{ 

                this.pentagrams.forEach((pentagramItem)=>{

                    this.drawPentagram(pentagramItem)

                })

            }

            this.drawHollowOut(hook)

            this.drawStrokeHollowOut(hook)

        }

        // 绘制底色

        drawBottomPlate(){

            this.context.save()

            this.context.fillStyle= 'rgb(247,190,80)';

            this.context.beginPath();

            this.context.rect(0, 0, this.progress, this.canvas.height);

            this.context.closePath();

            this.context.fill();

            this.context.restore()

        }

        // 绘制镂空五角星

        drawHollowOut(hook){

            this.context.beginPath();

            this.context.rect(0, 0, this.canvas.width, this.canvas.height);

            hook()

            this.context.closePath();

            this.context.fill();

        }

        // 绘制五星边框

        drawStrokeHollowOut(hook){

            this.context.save();

            this.context.strokeStyle = 'rgb(247,190,80)';

            // this.context.stroke.width = 1

            this.context.beginPath();

            this.context.rect(0, 0, this.canvas.width, this.canvas.height);

            hook()

            this.context.closePath();

            this.context.stroke();

            this.context.restore();

        }

        // 绘制星星

        drawPentagram(pentagramItem){

            pentagramItem.points.forEach((point,index)=>{

                eval('this.context.' + (index == 0 ? 'moveTo(' : 'lineTo(') + '...point)')

            })

        }

        // 绑定鼠标事件

        bindMouseEvent(){

            document.onmousemove = (event)=>{

                if(this.isMouseDown){

                    let { left } = this.getElementPosition(document.getElementById('canvas'))

                    this.progress = event.clientX - left

                    this.draw()

                    this.getCurrentScore()

                }

            }

            //鼠标按下事件

            document.onmousedown = (event)=>{

                this.isMouseDown = true             

                let { left } = this.getElementPosition(document.getElementById('canvas'))

                    this.progress = event.clientX - left

                    this.draw()

                    this.getCurrentScore()

            }

            //鼠标抬起事件

            document.onmouseup = ()=>{

                this.isMouseDown = false

            }

        }

        // 计算分数

        getCurrentScore(){

            let score = 0

            let firstPentagram = this.pentagrams.find((pentagram)=>{

                return this.progress <= pentagram.maxX

            })

            if(firstPentagram){

                let float = (Math.floor(((this.progress - firstPentagram.minX) / (firstPentagram.maxX - firstPentagram.minX)) * 10)) / 10

                float = float > 0 ? float : 0

                score = (firstPentagram.score - 1) + float

                document.getElementById('score').innerHTML = "评分：" + score

            } else {

                document.getElementById('score').innerHTML = "评分：" + this.pentagrams.length

            }

        }

        // dom在浏览器的位置

        getElementPosition(element){

            let top = element.offsetTop

            let left = element.offsetLeft

            let width = element.offsetWidth

            let height = element.offsetHeight

            var currentParent = element.offsetParent;

            while (currentParent !== null) {      

                top += currentParent.offsetTop

                left += currentParent.offsetLeft

                currentParent = currentParent.offsetParent

            }

            return {top,left,width,height}

        }

    }

    var pentagram = new PentagramManage(4)