mn-h5/src/utils/scoreCirle.ts

class ScoreCirle {
  

    constructor(context: CanvasRenderingContext2D, config: {
        score: number,
        total: number,
        lineWidth:number
        fillColor?:string
        strokeColor?:string

    }) {
        this.lineWidth=config.lineWidth;
        this.rad = (Math.PI*2)/config.total
        this.strokeColor = config.strokeColor||"#2589fa"
        this.context = context
        this.score = config.score
        this.total = config.total
        this.width = context.canvas.width
        this.height = context.canvas.height
        this.radius1 = (context.canvas.width/2)-15
        this.radius2 = (context.canvas.width/2)-30
    }
    total: number
    rad:number
    lineWidth:number
    radius2: number
    score: number
    context:CanvasRenderingContext2D
    width:number
    height:number
    radius1:number
    strokeColor:string
    init() {
        this.context.save();
        this.context.lineCap = "round";
        this.context.lineWidth=this.lineWidth
        this.context.strokeStyle=this.strokeColor
        this.context.beginPath();
        this.context.arc(this.width/2,this.height/2,this.radius1, -Math.PI / 2, (-Math.PI / 2)+this.score*this.rad,false);
        this.context.moveTo(this.width/2,this.height/2);
        this.context.textBaseline = "middle"
        this.context.font = "45pt sans-serif";
        this.context.textAlign="center"
        this.context.fillStyle = "#333333"
        this.context.fillText(`${this.score}.00`,this.width/2,this.height/2)
        this.context.fillStyle = "#808080"
        this.context.font = "15pt sans-serif";
        this.context.fillText(`/${this.total}`,this.width/2,this.height/2+50)
        this.context.stroke();
        this.context.restore();



    }
    

}
export default ScoreCirle