使用HTML5 SVG制作圆形进度条

Question

3

我使用canvas制作了这个圆形图。绿色进度从顺时针120度开始，到顺时针60度结束。在canvas中，您可以通过以下方式实现：

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

但是我发现从SVG做起来太困难了。有没有人能告诉我如何从SVG中实现呢？我之所以想从SVG中实现，是因为当进度动画时，屏幕缩放时画布的质量会降低。顺便说一下，如果你需要这方面的代码，我可以给你。它是高度可配置的：

- Ujjwal Ojha

你正在使用任何库来构建SVG吗？从零开始使用SMIL对于path元素可能有点棘手。 - musically_ut

我没有使用任何库！ - Ujjwal Ojha

1

如果画布的质量下降，那么你做错了什么。SVG也会像在画布上绘制的任何形状一样被转换为位图，因此在这里没有区别（除了缩放的位图/图像）。请分享你使用的画布代码。听起来你忘记了为每个帧清除画布或者忘记使用beginPath。 - user1693593

只有在缩放时才会降低质量！ - Ujjwal Ojha

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bring2dip · Accepted Answer

< p >在画布（canvas）中，弧形命令（arc command）相当简单。然而在SVG中，你必须使用路径（path）来绘制圆形进度条，这有点复杂。绘制进度的代码如下：

<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);

这会画出一个完整的进度条。如果你想改变进度，改变结束角度，即减小它。这只是绘制圆形路径的基本思路。