'通過Canvas加載圓'

Question

好吧，我敢肯定這已被問過，但我找不到任何直接關係到我正在做的事情。所以我有這4個自繪圖圈（或量表）。每個人都有它自己的價值，我一直在通過代碼和書籍來挑選nit挑選來建立它。我需要弄清楚的一個問題是，我會如何進行數數計算？基本上我想要一個計數器從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" }); 

渲染功能需要一個瓜哥對象繪製其進展

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

    }