I have already achieved circular progress bar animation for once. Now i want to generalize it which means I would like to use it multiple with different percentage values. As I understand this has to be done using Object orient concept. Though I tried this but i am not able to do it.
Please find my code at below link:
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();
First canvas id=can1 runs for 60% and I want to achieve the same for id=can2 but with different percent.
