javascript - jQuery或Canvas积分显示效果思路求解

Question

如图所示的信用积分100是通过Angular.js进行数据绑定的,现在我需要在信用积分页面用jQuery或Canvas做一个特效,用户的起始信用是100,白色的小圆圈在最右边,随后用户的信用分会在100分以上做增减,大于100分的时候,图片没有变化,当小于100分的时候,白色小圆圈就会逆时针移动

举个例子,当用户信用分为50的时候,白色的小圆圈在半圆的正中间,左边1/2圈仍旧为白色,右边1/2显示其他颜色效果；
当用户信用分为75的时候,白色的小圆圈在半圆右边3/4圈位置处,左边3/4圈仍旧为白色,右边1/4显示其他颜色效果；
也就是说圆圈颜色的变化是会随着我绑定的信用积分的变化而变化。
请问下,如果我想做出这种特效,改用jQuer还是Canvas动画来实现,没有思路,能否给出些思路应该如何来实现以上特效.(有其他技术的实现方式也可以,或者有类似的插件更好,在苦逼的被催着赶项目,deadline很紧，交互这块真的没精力多管,一个人负责一款app的前端，忙着和后台接口)

Answer 1

把高中数学书拿出来，把sin cos 这些内容重新捡起来，再加上相关函数，应该就可以解决了，嘿嘿

Answer 2

deadline很紧的话，上现成的图表库嘛。或者你找找有没有可以轻松做视觉化数据的SVG动画库，应该也能实现类似的效果。

Answer 3

看看这个：

芝麻信用

Answer 4

用canvas来写吧 通过监控信用分数与100的比例，然后已比例来算出当前应该在的位置的圆弧长度。再根据圆弧长度可以求出圆心角了。然后你还可以通过requestanimationframe 可以初始状态设为数据设为0，然后通过每次render去均匀修改值，达到进页面的时候圆圈动态变化位置的效果。