Javascript动态创建SVG圆弧

Javascript动态创建SVG圆弧

0. 起源

需要做一个展示统计数据(百分比)的小部件，默认情况下该小部件是隐藏的。页面右边放置一个圆形的按钮，当点击按钮时小部件从右边滑出显示。

本着尽可能多的展示数据而又不失简约的原则，希望在按钮上展示排名前几名数据的值，这样的话，不必手动点击按钮就知道数据的大概情况，增强了按钮的表现力。通过多个同心圆弧可以做到这一点。

要绘制多个圆弧，可先从绘制一个圆弧着手。

1. 问题描述

先看个草图，如下：

其中，点$A$是圆弧的起点，点$O$是圆心，点B是圆弧的终点，$\theta$ 是$OB$与$OA$的夹角，即 $\angle{BOA}$。$Y$轴的箭头是朝下的，因为SVG使用的是屏幕坐标系。

已知：
1. 圆弧起点$A$的坐标$(startX,startY)$
2. 圆弧的半径