Javascript 画布：多个径向进度条

我有一个小问题，我已经用canvas和js制作了3个径向进度条，大致遵循codeplayer.com上的指南

结果几乎是好的，而且很有效，问题是如果我有多个条，最后一条会从第一条取百分比。在我的示例中，第一个值是65%，最后一个值应该是88%，但它从第一个值中获取了数据属性

这是密码

Javascript:

window.onload = function(){

var canvas = document.getElementsByTagName('canvas');

for (var i = 0; i < canvas.length; i++) {
    progressBar(canvas[i].id);
}

// load the canvas
function progressBar(canvasId) {
    var canvas = document.getElementById(canvasId);
    var ctx = canvas.getContext('2d');

    // declare some variables
    var cWidth = canvas.width;
    var cHeight = canvas.height;
    var progressColor = 'lightblue';
    var circleColor = '#333';
    var rawPerc = canvas.getAttribute('data-perc');
    var definition = canvas.getAttribute('data-text');
    var perc = parseInt(rawPerc);
    var degrees = 0;
    var endDegrees = (360*perc)/100;

    var lineWidth = 10; // The 'brush' size

    console.log(canvasId+' '+perc);

    function getDegrees() {
        if(degrees < endDegrees) {
            degrees++;
        }
        else {
            clearInterval(degreesCall);
       }

    drawProgressBar();
}

function drawProgressBar() {
   //clear the canvas after every instance
   ctx.clearRect(0,0,cWidth,cHeight);

   // let's draw the background circle
   ctx.beginPath();
   ctx.strokeStyle = circleColor;
   ctx.lineWidth = lineWidth -1;
   ctx.arc(cHeight/2, cWidth/2, cWidth/3, 0, Math.PI*2, false);
   ctx.stroke();
   var radians = 0; // We need to convert the degrees to radians

   radians = degrees * Math.PI/180;
   // let's draw the actual progressBar
   ctx.beginPath();
   ctx.strokeStyle = progressColor;
   ctx.lineWidth = lineWidth;
   ctx.arc(cHeight/2, cWidth/2, cWidth/3, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false);
   ctx.stroke();

   // let's get the text
  ctx.fillStyle = progressColor;
  ctx.font = '20px Arial';
  var outputTextPerc = Math.floor(degrees/360*100)+'%';
  var outputTextPercWidth = ctx.measureText(outputTextPerc).width;
  var outputTextDefinitionWidth = ctx.measureText(definition).width;
  ctx.fillText(outputTextPerc, cWidth/2 - outputTextPercWidth/2, cHeight/2 - 10);
  ctx.fillText(definition, cWidth/2 - outputTextDefinitionWidth/2, cHeight/2 + 15);
}

degreesCall = setInterval(getDegrees, 10/(degrees - endDegrees));
}
}

对不起，这是个糟糕的结局

HTML:

我在工作中遇到了麻烦

知道为什么会占第一个百分比吗

感谢所有正在阅读的人

编辑：

奇怪的是，在控制台日志中，百分比是正确的。

您忘记定义degreesCall变量，因此它最终位于全局空间中，您覆盖了相同的间隔

var canvas=document.getElementsByTagName'canvas'； 对于var i=0；i.长度；i++{ progressBarcanvas[i].id； } //加载画布 Barcanvasid函数{ 变度球； var canvas=document.getElementByIdcanvasId； var ctx=canvas.getContext'2d'； //声明一些变量 var cWidth=canvas.width； var cHeight=canvas.height； var progressColor='浅蓝色'； var circleColor='333'； var rawPerc=canvas.getAttribute'data-perc'； var definition=canvas.getAttribute'data-text'； var perc=parseIntrawPerc； 变量度=0； var endDegrees=360*perc/100； var lineWidth=10；//画笔大小 控制台.logcanvasId+''+perc； 函数getDegrees{ ifdegrees哦，天哪，这真是个愚蠢的错误。非常感谢您解决了所有问题。线条边缘不锋利。有可能使边缘光滑吗。

<canvas id="canvas-3" width="300" height="300" data-text="Radial 1" data-perc="65"></canvas>
<canvas id="canvas-4" width="300" height="300" data-text="Radial 2" data-perc="90"></canvas>
<canvas id="canvas-1" width="450" height="450" data-text="Radial 3" data-perc="88"></canvas>