javascript - jQuery or Canvas integral display effect idea solution

Question

The credit score of 100 as shown in the picture is data bound through Angular.js. Now I need to use jQuery or Canvas to make a special effect on the credit score page. The user's starting credit is 100, and the small white circle is in On the far right, the user's credit score will then increase or decrease above 100 points. When it is greater than 100 points, the picture will not change. When it is less than 100 points, the small white circle will move counterclockwise

For example, when the user's credit is divided into 50, the small white circle is in the middle of the semicircle, the left 1/2 circle is still white, and the right 1/2 displays other color effects;
When the user's credit is When divided into 75, the small white circle is at the 3/4 circle position on the right side of the semicircle, the left 3/4 circle is still white, and the right 1/4 shows other color effects;
In other words, the change in the color of the circle will Changes as my tied credit points change.
I would like to ask, if I want to make this kind of special effect, should I use jQuer or Canvas animation to achieve it? I don’t have any ideas. Can you give me some ideas on how to achieve the above special effects? (There are other technical implementation methods, too. Or it would be better to have a similar plug-in. I am being pushed hard to catch up on the project and the deadline is very tight. I really don’t have the energy to take care of the interaction. One person is responsible for the front-end of an app and is busy interfacing with the back-end)

Answer 1

Take out the high school mathematics book, pick up the sin cos content again, and add related functions, you should be able to solve it, hehe

Answer 2

If the deadline is very tight, use a ready-made chart library. Or you can look for an SVG animation library that can easily visualize data, which should be able to achieve similar effects.

Answer 3

Look at this:

Sesame Credit

Answer 4

Use canvas to write it. By monitoring the ratio of the credit score to 100, and then use the ratio to calculate the arc length of the current position. Then the central angle can be found based on the arc length. Then you can also use requestanimationframe to set the initial state to data as 0, and then modify the value evenly through each render to achieve the effect of the circle dynamically changing position when entering the page.