推广循环进度条动画多次使用不同百分比

Question

我已经实现了一次循环进度条动画。现在我想概括它，这意味着我想使用不同百分比值的多个。据我所知，这必须使用Object orient概念来完成。虽然我试过这个，但我无法做到。

请在以下链接中找到我的代码：

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

第一个canvas id = can1运行60％，我想为id = can2实现相同但不同的百分比。