円形の進行状況バーのアニメーションを一度達成しました。今、私はそれを一般化したいと思っています。つまり、異なるパーセンテージ値で複数使用したいと考えています。私が理解しているように、これはオブジェクト指向の概念を使用して行う必要があります。私はこれを試しましたが、私はそれを行うことができません。
以下のリンクで私のコードを見つけてください：
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 でも同じことを達成したいが、パーセントは異なります。