0

我已经实现了一次圆形进度条动画。现在我想概括它，这意味着我想用不同的百分比值多次使用它。据我了解，这必须使用面向对象的概念来完成。虽然我试过这个，但我做不到。

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

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 实现相同但百分比不同。

4

0 回答 0