let canvasNode = document.getElementById("canvas"),
ctxs = canvasNode.getContext("2d");
console.log(canvasNode)
class CircleProgress {
constructor(ctxs, width, height, arc) {
this.ctx = ctxs
this.ctx.canvas.width = width
this.ctx.canvas.height = width
this.arc = arc
}
clearFill() {
this.ctx.clearRect(0, 0, this.width, this.width);
}
fillBg() {
this.ctx.beginPath();
this.ctx.lineWidth = this.arc;
this.ctx.strokeStyle = "-sharpccc";
this.ctx.arc(this.width / 2, this.width / 2, 45, 0, 2 * Math.PI);
this.ctx.stroke();
}
fillArc(x) {
this.ctx.beginPath();
this.ctx.lineWidth = this.arc;
this.ctx.strokeStyle = "-sharpccc";
this.ctx.arc(this.width / 2, this.width / 2, 45, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
this.ctx.stroke();
}
fillText(x) {
this.ctx.font = "14px" + " Arial";
this.ctx.fillStyle = "red";
this.ctx.textBaseline = "middle";
this.ctx.textAlign = "center";
this.ctx.fillText(x.toFixed(1) + "%", this.width / 2, this.width / 2);
}
fill(x) {
this.fillBg();
this.fillArc(x);
this.fillText(x);
}
testFn() {
return this.ctx
}
}
let cicle = new CircleProgress(ctxs, 100, 100, 10)
cicle.fill(100)
