用html5 svg制作循环进度条[重复]答案

【问题标题】：Making Circular Progress bar with html5 svg [duplicate]用html5 svg制作循环进度条[重复]
【发布时间】：2014-01-02 19:40:40
【问题描述】：

我用画布制作了这个圆形图。绿色进度从顺时针 120 度开始，到顺时针 60 度结束。在画布中，您可以使用

context.arc(centerx, centery,radius, startangle, endangle, anticlockwise);

但我发现 SVG 太难了。谁能告诉我如何从svg做到这一点。我喜欢从 SVG 做这件事的原因是，当动画进度时，当屏幕缩放时画布的质量会下降。顺便说一句，如果你需要一个代码，我可以给你。它是高度可配置的：

【问题讨论】：

您是否使用任何库来构建 SVG？从头开始对 path 元素使用 SMIL 可能有点棘手。
我没有使用任何库！
如果画布上的质量下降，你就做错了。 SVG 也将被转换为位图，就像在画布上绘制的任何形状一样，所以这里没有区别（除了被缩放的位图/图像）。请分享您在画布上使用的代码。听起来您忘记清除每一帧的画布或忘记使用 beginPath。
只有放大后画质才会下降！

【解决方案1】：

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(centerx,centery,startangle,endangle);

这绘制了一个完整的进度。如果要更改进度，请更改结束角度，即减小它。这只是绘制圆形路径的想法。

【讨论】：