Javascript '；加载循环'；透过画布

好吧，伙计们，我肯定以前有人问过这个问题，但我找不到任何与我所做的事情直接相关的东西。所以我有这4个自绘圆圈（或量规）。每一个都有它自己的价值，我一直在通过对代码和书籍的挑剔来构建它。我需要弄清楚的问题是，我将如何进行计数？基本上我想要一个从1到x的计数器（x是它所在圆的度数）。我已经包括了我的js和HTML5供大家看

HTML

var canvas=document.getElementById（'a'）；
var context=canvas.getContext（'2d'）；
var x=画布宽度/2；
变量y=画布高度/2；
var半径=75；
var startAngle=1.5*Math.PI；
var endAngle=3.2*Math.PI；
var逆时针=假；
context.beginPath（）；
弧（x，y，半径，星形，端角，逆时针）；
context.lineWidth=15；
//线条颜色
context.strokeStyle='black'；
stroke（）；

Canvas.JS

$(document).ready(function(){
 function animate(elementId, endPercent) {
     var canvas = document.getElementById(elementId);
     var context = canvas.getContext('2d');
     var x = canvas.width / 2;
     var y = canvas.height / 2;
     var radius = 75;
     var curPerc = 0;
     var counterClockwise = false;
     var circ = Math.PI * 2;
     var quart = Math.PI / 2;

     context.lineWidth = 15;
     context.strokeStyle = '#85c3b8';
     context.shadowOffsetX = 0;
     context.shadowOffsetY = 0;
     context.shadowBlur = 10;

     function render(current) {
         context.clearRect(0, 0, canvas.width, canvas.height);
         context.beginPath();
         context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
         context.stroke();
         curPerc++;
         if (curPerc < endPercent) {
             requestAnimationFrame(function () {
                 render(curPerc / 100);


             });
         }
     }
     render();
 }


    $(window).scroll(function(){
        if($(this).scrollTop()<1600){
            animate('a', 85);
            animate('b', 95);
            animate('c', 80);
            animate('d', 75);

        }
    });
});

$（文档）.ready（函数（）{
函数动画（elementId，endPercent）{
var canvas=document.getElementById（elementId）；
var context=canvas.getContext（'2d'）；
var x=画布宽度/2；
变量y=画布高度/2；
var半径=75；
var-curPerc=0；
var逆时针=假；
var circ=Math.PI*2；
var quart=Math.PI/2；
context.lineWidth=15；
context.strokeStyle='#85c3b8'；
context.shadowOffsetX=0；
context.shadowOffsetY=0；
context.shadowBlur=10；
函数渲染（当前）{
clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
弧（x，y，半径，-（夸脱），（（圈）*当前）-夸脱，假）；
stroke（）；
curPerc++；
如果（curPerc

您可以将仪表另存为阵列中的对象：

    var guages=[];
    guages.push({ x:50, y:100,  radius:40, start:0, end:70, color:"blue" });
    guages.push({ x:200, y:100, radius:40, start:0, end:90, color:"green" });
    guages.push({ x:50, y:225,  radius:40, start:0, end:35, color:"gold" });
    guages.push({ x:200, y:225, radius:40, start:0, end:55, color:"purple" });

render函数接受一个guage对象并绘制其进度

    function render(guage,percent) {
        var pct=percent/100;
        var extent=parseInt((guage.end-guage.start)*pct);
        var current=(guage.end-guage.start)/100*PI2*pct-quart;
        ctx.beginPath();
        ctx.arc(guage.x,guage.y,guage.radius,-quart,current);
        ctx.strokeStyle=guage.color;
        ctx.stroke();
        ctx.fillStyle=guage.color;
        ctx.fillText(extent,guage.x-15,guage.y+5);
    }

动画循环要求渲染绘制其完整值的0-100%的所有仪表

    function animate() {

            // if the animation is not 100% then request another frame

            if(percent<100){
                requestAnimationFrame(animate);
            }

            // redraw all guages with the current percent

            drawAll(percent);

            // increase percent for the next frame

            percent+=1;

    }

    function drawAll(percent){

        // clear the canvas

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // draw all the guages

        for(var i=0;i<guages.length;i++){
            render(guages[i],percent);
        }

    }

function animate（）{
//如果动画不是100%，则请求另一帧
如果这是完美的，正是我所需要的，非常感谢你！
    function animate() {

            // if the animation is not 100% then request another frame

            if(percent<100){
                requestAnimationFrame(animate);
            }

            // redraw all guages with the current percent

            drawAll(percent);

            // increase percent for the next frame

            percent+=1;

    }

    function drawAll(percent){

        // clear the canvas

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // draw all the guages

        for(var i=0;i<guages.length;i++){
            render(guages[i],percent);
        }

    }