通过Canvas'加载圈'

Question

好吧，伙计们，我确信以前曾经问过，但我找不到任何与我在做的事情直接相关的事情。所以我有这四个自画圈（或量表）。每个人都有它自己的价值，我一直在寻找通过代码和书籍来挑选构建它。我需要弄清楚的问题是如何进行计数？基本上我想要一个计数器从1 - x（x是它所在的圆的程度）。我已经包含了我的js和HTML 5供你们查看。

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

        }
    });
});

请记住，我是画布的新手，我感谢所有帮助人员！

Answer 1

演示：http://jsfiddle.net/m1erickson/mYKp5/

您可以将仪表保存为数组中的对象：

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

渲染功能需要一个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);
        }

    }