'loading circle' through Canvas

Question

Alright guys, I'm sure this has been asked before, but I couldn't find anything that directly related to what I was doing. So I have these 4 self drawing circles (or gauges.) Each one has it's own value, and I've been looking through just nit picking through codes and books to build this. My question I need to figure out is how I would go about putting in a count up? Basically I want a counter to go from 1 - x (x being the degree of the circle it's in). I've included my js and HTML 5 for you guys to look at.

HTML

<canvas id="a" width="300" height="300"></canvas>

   <script>
    var canvas = document.getElementById('a');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 3.2 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;
      // line color
      context.strokeStyle = 'black';
      context.stroke();

    </script>

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

        }
    });
});

Keep in mind that I am very new to canvas, I appreciate all the help guys!

Answer 1

Demo: http://jsfiddle.net/m1erickson/mYKp5/

You can save your gauges as objects in an array:

    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" });

The render function takes a guage object draws its progress

    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);
    }

And the animation loop asks render to draw all gauges from 0-100 percent of their full values

    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);
        }

    }