Canvas, the strongest interface of H5, implements dynamic graphics functions

In the last article, we shared how to use canvas to draw graphics, but the drawings were all static graphics. This week we will learn how to use canvas to draw dynamic graphics.

Before we draw animation, we must understand what animation is. What are the minimum basic conditions required for an animation?

What can we use a tool to show animation?

This is an animation effect drawn using PPT

According to the animation effect drawn by the above PPT, we can see that when you quickly switch between several PPT pages, you will see an animation effect.

This is the basic element of animation implementation:

Play multiple pictures continuously per unit time. This unit time is generally measured in seconds. In order to obtain a smooth enough video in computer-rendered graphics, the number of pictures per second must be greater than or equal to the refresh rate of the monitor (this refresh rate is generally 60hz)

The state of the objects in each picture (size, shape, color, position, angle, etc.) must change

So how do we implement these two conditions in canvas?

We can transform this into drawing a graph every 1/60s. In JavaScript, if we want to do something every once in a while, the method we use is to use the timer setinterval.

setinerval（function f(){}，t）， two parameters can be passed into the timer, one is the function and the other is the time. The meaning of this code is to execute the function f every t ms.

Then we use this to achieve what we need to draw a graph every 1/60s

 setInterval(function(){canCon.fillStyle=black;//canCon.fill means to pick up a pen to draw solid graphics on this rice paper, //style=black means to dip it in black ink//continuously To look at it, just pick up a pen for drawing solid graphics and stick it with black ink canCon.arc(233,233,66,0,Math.PI*2); //Consider drawing a circle on the rice paper (the X position of the center, the Y position, the radius of the circle, where to start drawing the circle, and where to end); canCon.fill(); //Last stroke to draw},1000/60 )

final effect

But there is no animation effect yet, because the 60 graphics drawn within 1 second are all exactly the same, so the state of the element must be changed when each graphics is drawn.

By the way, I would like to recommend a skirt to you. The front is 537, the middle is 631, and the last is 707. Friends who want to learn front-end can join us to learn together and help each other. There are masters in the group giving free live classes every night. If you don’t want to learn, don’t join.

(537-631-707)

How to change the state of an element?

The position of a circle is determined by the coordinates of the center of the circle, so we can change the position of the element every time we draw the canvas.

 vary=100;//Give an initial center position of the circle, and the y position of the center of the circle will move downward by a distance each time it is drawn setInterval(function(){canCon.fillStyle=black;//canCon.fill means Pick up a pen to draw solid shapes on this rice paper, //style=black means to dip it in A black ink //To connect it, just pick up a pen for drawing solid graphics and stick it with black ink canCon.arc(233,y++,66,0,Math.PI*2);//on rice paper Conceive and draw a circle (the X position of the center of the circle, the Y position, the radius of the circle, where to start drawing the circle, and where to end); canCon.fill();//Last stroke to draw},1000/60)

What we see at this time is not a moving circle, but more like an extending progress bar. The reason is actually very simple. We do not erase the original graphics every time we draw a new graphic. Such a picture is the result of n multiple graphics superimposed together. So every time we draw a new graphic, we have to erase the original one. So how to do it?

 vary=100;//Give an initial center position of the circle, and the y position of the center of the circle will move downward by a distance each time it is drawn setInterval(function(){canCon.clearRect(0, 0, 500, 500);/ /Erase the coordinates of the upper left corner of a rectangular area and the width and height of the rectangle canCon.fillStyle=black;//The meaning of canCon.fill is to pick up a painting on this rice paper A pen with solid graphics, //style=black means dipping it in black ink //To put it together, it means picking up a pen that draws solid graphics and sticking it with black ink canCon.arc(233,y++,66 ,0,M ath.PI*2);//Consider drawing a circle on rice paper (X position of the center of the circle, Y position, radius of the circle, where to start drawing the circle and where to end); canCon.fill();// Start painting},1000/60)

But it still has no effect at this time, so what exactly is going on? We can think back to the scene when we were children when we were painting. When we erase a certain area on the drawing paper, do we need to lift the brush first, so that we can use the eraser to erase certain areas on the paper, so we You have to lift the pen before erasing an area of ​​the canvas.

 vary=100;//Give an initial center position of the circle, and the y position of the center of the circle will move downward by a distance each time it is drawn setInterval(function(){canCon.beginPath();//Lift the pen up canCon. clearRect(0, 0, 500, 500);//Erase the coordinates of the upper left corner of a rectangular area and the coordinates of the rectangle Width and height canCon.fillStyle=black;//canCon.fill means to pick up a pen to draw solid graphics on this rice paper, //style=black means to dip it in a black ink//If you connect it together, it is Pick up a pen for drawing solid shapes and stick it with black ink canCon.arc(233,y++,66,0,Math.PI*2); //Consider drawing a circle on the rice paper (the X position of the center, the Y position, the radius of the circle, where to start drawing the circle, and where to end); canCon.fill(); //Last stroke to draw},1000/60 )

In this way we can get a moving circle

The above is the editor's introduction to H5's strongest interface, canvas, to implement dynamic graphics functions. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!