Shooting chicken and lion said that the round progress bar was not the effect I wanted


On a day when there is nothing special, you receive a design drawing that is nothing special, and prepare to write an activity page that is nothing special. Then, you see an effect:
Shooting chicken and lion said that the round progress bar was not the effect I wanted

“Well, shoot chicken and lion, are you not well drawn? You are missing a corner.”
“This is design, do you understand? You’re done with the design. Don’t beep. “
“Wipe, what can I do without a corner circle!? Listen to me, CSS can only draw circles, and both ends of your ring are still round… “
“Is there any mistake? This little picture can’t be made. Let’s change the front end to connect with me.”
As a dignified front-end engineer, you must prove yourself! Think about what you can do. Well, can canvas draw?
As a front-end engineer skilled in operating Ctrl + C and Ctrl + V, let’s see if canvas provides any API for us to use Ctrl + C.

See if canvas offers what we want

Official documents are not for you to read. Here is a good canvas tutorial. As our goal is to prove ourselves, we quickly turned over the contents of this tutorial and found a title “drawing standard arc”. Is this what we want?
Put aside those complicated arcs and curves, we will find an API: context.arc (x, y, radius, startangle, endangle, anti lock wise), in which startangle and endangle are the starting and ending positions, and their units are radians. As long as we make good use of these two positions, we can draw an unclosed circle! Diagram of intuitive points:
Shooting chicken and lion said that the round progress bar was not the effect I wanted

Try to draw an unclosed circle

Codepen look
GET! This is what we want! This is only the first step of success. Look at the difference with the effect picture. We are still short of a green circle framed by an outer ring.

Draw another outer ring to frame on the original basis

Codepen look
This is a high fidelity design! The rest is simple, just let the green circle move and it’s done!

Move it.

The animation idea is quite clear. It’s just to move the inner circle from one position to another frame by frame until it reaches the end position:
Codepen look
So far, you’ve proved yourself and regained the dignity of front-end engineers! Go, shoot the chicken and lion!

Recommended Today

Custom factory class

using System; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Reflection; using System.Text; namespace LYZB.ApiConfig { /// ///Custom factory class /// // generic public abstract class AssesUtil where T : class,new() { /// ///Cache collection /// private static Hashtable hash = Hashtable.Synchronized(new Hashtable()); /// ///Execution instance method /// ///Method name ///Parameter type ///Parameter entity /// public […]