Javascript动态创建SVG圆弧
0. 起源
需要做一个展示统计数据(百分比)的小部件,默认情况下该小部件是隐藏的。页面右边放置一个圆形的按钮,当点击按钮时小部件从右边滑出显示。
本着尽可能多的展示数据而又不失简约的原则,希望在按钮上展示排名前几名数据的值,这样的话,不必手动点击按钮就知道数据的大概情况,增强了按钮的表现力。通过多个同心圆弧可以做到这一点。
要绘制多个圆弧,可先从绘制一个圆弧着手。
1. 问题描述
先看个草图,如下:
其中,点 A A 是圆弧的起点,点 是圆心,点B是圆弧的终点, θ θ 是 OB O B 与 OA O A 的夹角,即 ∠BOA ∠ B O A 。 Y Y 轴的箭头是朝下的,因为SVG使用的是屏幕坐标系。
已知:
1. 圆弧起点
的坐标 (startX,startY) ( s t a r t X , s t a r t Y )
2. 圆弧的半径