使用html5 svg创建循环进度条

canvas的arc命令非常简单.但是在SVG中你必须使用路径来绘制循环进度,它有点复杂.取得进步的代码是

<path d="M startx starty A radiusx radiusy x-axis-rotation large-arc-flag sweep-flag endx endy " />

绘制进度背后的想法是,您必须绘制一条从圆周开始的路径,该路径从指定角度开始并以指定角度结束.有一个数学公式可以在圆周上找到可用于在svg中创建路径的点

x = centerx + radius * Math.cos(anglein radians);
y = centery + radius * Math.cos(anglein radians);

为简化起见,我找到了一个计算路径的函数.你只需写这个:

progress(200, 200, 120, -150, 150);

progress函数采用以下参数:

progress(centerx,centery,startangle,endangle);

这将完全取得进展.如果你想改变进度,改变结束角度即降低它.这只是绘制圆形路径背后的想法.

这是JSFiddle链接