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:
“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:
Try to draw an unclosed circle
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
This is a high fidelity design! The rest is simple, just let the green circle move and it’s done!
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:
So far, you’ve proved yourself and regained the dignity of front-end engineers! Go, shoot the chicken and lion!