web前端 环形进度表咋实现
以前做的一个很粗糙，没有做兼容http://runjs.cn/code/tzppq1oc
■网友
canvas
■网友
看到楼上 sin 和 cos 先取绝对值, 再 switch...
其实没有这个必要, SVG 坐标系和笛卡尔坐标系的 Y 轴是相反的, 所以笛卡尔坐标系的角度增加的逆时针方向换成 SVG 的顺时针就可以啦, 用不着 switch .
楼上贴的代码基本上是对的, 关键就在于计算出坐标和设置路径的 d, 再贴一下API:
【web前端 环形进度表咋实现】 A rx ry x-axis-angle large-arc-flag sweep-flag x y:
rx, ry: 水平和垂直方向的半径.x-axis-angle: x 轴顺时针旋转角度, 主要用于椭圆.large-arc-flag: 为 0 时绘制小于 180° 的圆弧, 为 1 时绘制大于 180° 的圆弧.sweep-flag: 为 0 时逆时针绘制, 为 1 时顺时针绘制.x, y: 终点坐标.注意圆心的坐标通过起始坐标和结束坐标以及半径来计算, 所以当圆弧接近 360, 且计算精度难以保证时, 建议拆分为两个 180° 的圆弧.
■网友
c3做不用兼容
推荐阅读
- 啥是微信开发WEB前端
- web开发，一般项目经理从项目中拿多少项目奖金
- 想写个个人博客，苦于不知道用啥前端框架
- 哪些是学了前端才知道的事
- 各位知友，你们觉得搞IT前端的大学毕业去成都发展咋样
- 同时喜欢web和单片机，业余自学程序员，应该怎样选方向
- 女生想转行做习前端开发，自学有哪些好的教程和方法怎样深入jquery
- 入游戏开发坑一年，迷茫中，应该选择原生app游戏还是web html5游戏还是3d重度游戏，未来是何
- 2017年各种语言的就业形势怎样(Android,iOS,PHP,Java,前端)
- web前端对英语有要求吗