Javascript 正在更新进程周期中的百分比

我正在使用这里给出的一个备选方案（）构建一个带有进度圈的待办事项列表。在我的script.js中，我定义了函数

drawRingProgress（）

，当我在脚本末尾执行它时，它会呈现画布

在执行脚本的其他功能以添加任务、编辑、删除任务或将其标记为完成任务时，参数

pendingTasks

和

completedTasks

会得到更新。但是，如果我在其他提到的函数中调用函数

drawRingProgress（）

，为了更新进度，画布会在其他地方错误地绘制多次（取决于这些函数所作用的HTML元素）。呈现更新的进度百分比的正确方法是什么

链接到工作示例：

---

下面是我将如何绘制图表。我已经从中删除了所有其他函数，因此它只显示基于变量设置的图形进度。一旦你弄明白了其他函数，你就可以通过这个方法来更新它们

首先，我将在脚本开始时获得画布，并将变量指定为全局变量

第二，我会把白色的甜甜圈拉出来。除非您计划以某种方式对其进行更改，否则函数

drawGraph（）

将被调用一次，仅此而已

第三，当您添加、删除或完成任务时，其他函数将调用函数

drawRingProgress（）

。在调用

drawRingProgress（）

之前，确保这些函数也会更新

pendingTasks

和

completedTasks

在

drawRingProgress（）

内部，我添加了文本，因为canvas具有内置的方法，所以您不需要使用

。就你所有的选择而言，我为此删除了它们，但你可以将它们添加回你认为合适的地方

const inputField=document.getElementById（“addTask”）；
const taskList=document.getElementById（“任务列表”）；
var canvas=document.getElementById（'graph'）；
var ctx=canvas.getContext（'2d'）；
画布宽度=200；
画布高度=200；
让pendingTasks=20；
让completedTasks=5；
//进步环
函数drawGraph（）{
ctx.beginPath（）；
ctx.strokeStyle=“白色”；
ctx.arc（canvas.width/2，canvas.height/2，50，0，Math.PI*2，false）；
ctx.lineCap='round'；//对接、圆形或方形
ctx.lineWidth=15；
ctx.stroke（）；
ctx.closePath（）；
}
绘图（）；
函数drawRingProgress（待定任务、已完成任务）{
让进度百分比=（已完成任务/待完成任务）*100；
ctx.font=“30px无衬线”；
ctx.textAlign=“中心”；
ctx.textb基线=“中间”；
ctx.fillStyle=“#046582”；
ctx.fillText（进度百分比+'%'，canvas.width/2，canvas.height/2）；
百分比=数学最小值（数学最大值（0，（进度百分比/100）| | 1），1）；
ctx.beginPath（）；
ctx.save（）；
ctx.translate（0，canvas.height）；//更改中心
ctx.旋转（（-1/2+0/180）*数学PI）；//旋转-90度
ctx.arc（canvas.width/2，canvas.height/2，50，0，Math.PI*2*百分比，false）；
ctx.strokeStyle=“#046582”；
ctx.lineCap='round'；//对接、圆形或方形
ctx.lineWidth=15；
ctx.stroke（）；
ctx.restore（）；
ctx.closePath（）；
}
绘图进度（待完成任务、已完成任务）
#主体{
背景色：#046582；
}
标题{
背景色：#f39189；
填充：50px；
利润率：50像素；
位置：粘性；
顶部：0px；
}
h1{
文本对齐：居中；
}
.listItem{
利润率：20px 0px；
背景色：白色；
}
.集装箱{
背景色：#C4；
}
.任务清单{
列表样式类型：无；
背景色：透明；
溢出：隐藏；
边缘顶部：150px；
}
.输入容器{
利润率：50像素；
填充：20px；
最大宽度：50%；
宽度：100%；
背景色：#f39189；
}
#页脚{
文本对齐：居中；
位置：粘性；
底部：0px；
背景色：#f39189；
填充：20px；
}
.Delete按钮{
背景图片：url（“/content/delete.png”）；
背景重复：无重复；
背景尺寸：封面；
光标：指针；
宽度：30px；
高度：30px；
利润率：15px；
}
#添加任务{
字体系列：Verdana，日内瓦，塔荷马，无衬线；
字体大小：1.3rem；
}
.taskName{
字体系列：Verdana，日内瓦，塔荷马，无衬线；
字号：1.2rem；
}
.listContainer{
高度：1080px；
}
.输入容器{
位置：固定；
}
.复选框{
文字装饰：线条贯通；
颜色：#f39189；
}
/*开始设置进度环的样式*/
.图表{
位置：相对位置；
/*边际：0px*/
宽度：220px；
高度：220px；
}
帆布{
显示：块；
位置：绝对位置；
排名：0；
左：0；
}
跨度{
颜色：046582；
显示：块；
线高：220px；
文本对齐：居中；
宽度：220px；
字体系列：无衬线；
字体大小：30px；
字号：100；
左边距：5px；
}
/*链接进度环*/
/* https://stackoverflow.com/questions/14222138/css-progress-circle
http://jsfiddle.net/Aapn8/3410/ */
/*端部造型进度环*/

文件
注意
添加

2021
以下是我将如何绘制图表。我已经从中删除了所有其他函数，因此它只显示基于变量设置的图形进度。一旦你弄明白了其他函数，你就可以通过这个方法来更新它们

首先，我将在脚本开始时获得画布，并将变量指定为全局变量

第二，我会把白色的甜甜圈拉出来。除非您计划以某种方式对其进行更改，否则函数
drawGraph（）
将被调用一次，仅此而已

第三，函数
drawRingProgress（）
将获得
let pendingTasks = 31;
let completedTasks = 69;

function drawRingProgress(pendingTasks, completedTasks) {

    var el = document.getElementById('graph'); // get canvas

    let progress_percentage = Math.floor((completedTasks / (completedTasks + pendingTasks)) * 100) || 0;

    var options = {
      // percent:  el.getAttribute('data-percent') || 25,
      percent: progress_percentage,
      // size: 110,
      size: el.getAttribute('data-size') || 220,
      lineWidth: el.getAttribute('data-line') || 15,
      rotate: el.getAttribute('data-rotate') || 0
    }

    var canvas = document.createElement('canvas');
    var span = document.createElement('span');
    span.textContent = options.percent + '%';

    if (typeof (G_vmlCanvasManager) !== 'undefined') {
      G_vmlCanvasManager.initElement(canvas);
    }

    var ctx = canvas.getContext('2d');
    canvas.width = canvas.height = options.size;

    el.appendChild(span);
    el.appendChild(canvas);

    ctx.translate(options.size / 2, options.size / 2); // change center
    ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

    //imd = ctx.getImageData(0, 0, 240, 240);
    var radius = (options.size - options.lineWidth) / 3.2;

    var drawCircle = function (color, lineWidth, percent) {
      percent = Math.min(Math.max(0, percent || 1), 1);
      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
      ctx.strokeStyle = color;
      ctx.lineCap = 'round'; // butt, round or square
      ctx.lineWidth = lineWidth
      ctx.stroke();
    };

    drawCircle('#efefef', options.lineWidth, 100 / 100);
    drawCircle('#046582', options.lineWidth, options.percent / 100)
}

drawRingProgress(pendingTasks, completedTasks);