单说圆弧和刻度，差不多的流程是这样。用canvas实现。
1.可以计算好角度，画两个红色扇形。
2.里面画个小点的圆。背景色。外环就画那样最好。
3.再画三个小一点的白色扇形。
4.画小一些的刻度。比较多是把原点弄到圆心位置去。
5.再画个小一点的红色扇形。把画的线一空遮盖。
6.画大刻度。
7.再画一个小一点的背景色圆形。ok。外环和刻度都差不多结束。
然后把就是内圈里面的文字。应该是用css3的一些知识。参考@JimLiu的回答。
同样的思路。最外圈上会动的小圆点也是完全不一样。
到最后是中间的数字。
效果演示：仿支付宝芝麻信用HTML5
代码：zhihu-answers/zfbatmaster·liusaint/zhihu-answers · GitHub还有一个一些效果没做实现。.例如伴随着进度背景颜色的改变。例如最外圈的颜色渐变。对canvas了解不太多。我相信有更好的实现程序办法。
本文只为分享，如有侵权，联系下方qq删除：
![[db:作者]的头像](http://www.thjdz.com/wp-content/uploads/2021/03/banner1-2.jpg){kind=avatar}