我已经实现了一次圆形进度条动画。现在我想概括它，这意味着我想用不同的百分比值多次使用它。据我了解，这必须使用面向对象的概念来完成。虽然我试过这个，但我做不到。
请在以下链接中找到我的代码：
https://jsfiddle.net/kenuete/0ak0jeya/
<canvas id="can1" width="350" height="200"></canvas>
<canvas id="can2" width="350" height="200"></canvas>
var main = function()
{
var ctx = document.getElementById("can1").getContext('2d');
ctx.lineWidth = 10;
ctx.beginPath();
ctx.strokeStyle = 'red';
var ang_start = 1.5;
var ang_end = 1.55;
var ang_end_pt = 1.5+(60/100)*2; //60%
var pct_text = 2.5;
var myFun = function()
{
ctx.clearRect(0,0,1000,500);
ctx.arc(100,75,50,ang_start*Math.PI,ang_end*Math.PI);
ctx.textAlign="center";
ctx.fillText(Math.round(pct_text)+'% HTML',100,75);
ctx.stroke();
ang_start = ang_start + 0.05;
ang_end = ang_end + 0.05;
pct_text = pct_text + 2.5;
if (ang_end>=ang_end_pt)
{
clearInterval(v1);
}
};
v1 = setInterval(myFun,50);
}
main();
第一个画布 id=can1 运行 60%，我想为 id=can2 实现相同但百分比不同。