Canvas 环形进度条

<canvas id="canvas7"></canvas>

 function loadCircleData(score) {
        new Progress().renderOne("canvas7", 120, 5, score);
    }

score 是后台传过来的值-----62,2

var Progress = function() {
    var progress = {
        textheight: null,
        renderOne: function(id, length, r, percent) {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            canvas.width = length;
            canvas.height = length;
            var i = 0;
            var interval = setInterval(function() {
                i++;
                progress.render(context, length, r, i, percent);
                if (i >= percent) {
                    clearInterval(interval)
                }
            },
            10)
        },
        render: function(context, length, r, i, percent) {
            context.clearRect(0, 0, length, length);
            context.beginPath();
            var gradient = context.createLinearGradient(length, 0, 0, 0);
            gradient.addColorStop("0", "#00FFFF");
            gradient.addColorStop("1.0", "#00FFFF");
            context.strokeStyle = gradient;
            context.lineWidth = 2;
            context.arc(length / 2, length / 2, length / 2 - r, -0.5 * Math.PI, -0.5 * Math.PI - i * 0.02 * Math.PI, true);
            context.stroke();
            context.closePath();
            context.beginPath();
            context.strokeStyle = "#00FFFF";
            context.lineWidth = 1;
            context.fillStyle = "rgba(255, 255, 255, 0.5)";
            context.arc(length / 2, r, 0.6 * r, 0, 2 * Math.PI, false);
            context.stroke();
            context.fill();
            context.closePath();
            context.beginPath();
            var radian = percent / 100 * 2 * Math.PI - 0.5 * Math.PI;
            var x = -Math.cos(radian) * (length / 2 - r) + length / 2;
            var y = Math.sin(radian) * (length / 2 - r) + length / 2;
            context.arc(x, y, 0.6 * r, 0, 2 * Math.PI, false);
            context.stroke();
            context.fill();
            context.closePath();
            context.beginPath();
            context.lineWidth = 1;
            context.strokeStyle = "rgba(255, 255, 255, 0)";
            context.fillStyle = "rgba(255, 255, 255, 0)";
            context.arc(length / 2, length / 2, length / 2 - 2 * r, 0, 2 * Math.PI);
            context.fill();
            context.closePath();
            context.beginPath();
            // context.font = "bold " + (length / 2 - 2.5 * r) / 2 + "px 微软雅黑";
            context.font = "bold 24px 微软雅黑";
            context.fillStyle = "#FFFF00";
        
            var text = percent ;
            textwidth = context.measureText(text).width;
            if (this.textheight == null) {
                var div = document.createElement("div");
                document.body.appendChild(div);
                div.innerHTML = text;
                div.style.fontSize = ((length / 2 - 2.5 * r) / 2) + "px";
                this.textheight = div.offsetHeight;
                div.parentNode.removeChild(div)
            }
            textheight = this.textheight;
            context.fillText(text, (length - textwidth) / 2.5, length / 1.8 + textheight / 2);
            context.fill();

            context.font = "bold 14px 微软雅黑";
            context.fillStyle = "#00FFFF";
            context.fillText('总体评价', (length - textwidth) /2.5, length / 3.5 + textheight / 2);

            context.font = "bold 12px 微软雅黑";
            context.fillStyle = "#FFFFFF";
            context.fillText('分', (length - textwidth) / 0.8, length /1.8 + textheight / 2);
            context.closePath()
        }
    };
    return progress
};