使用html5 svg创建循环进度条

Question

我用画布制作了这个圆形图. 绿色进度从顺时针120度开始,顺时针以60度结束.在画布中,你这样做

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

但我发现SVG太难了.任何人都可以告诉我如何从svg做到这一点.我之所以喜欢从SVG这样做是因为当动画进度时,画面的质量会在屏幕缩放时降低.顺便说一句,如果你需要一个代码,我可以给你.它具有高度可配置性:

Answer 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函数采用以下参数:

progress(centerx,centery,startangle,endangle);

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

这是JSFiddle链接