Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to achieve canvas dynamic graphics effect by html5". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "html5 how to achieve canvas dynamic graphics effect"!

What is animation?

Before drawing animation, we must figure out what is animation, and what are the basic conditions for an animation at least?

We can use a tool to show what animation is.

This is an animation effect drawn with PPT.

The basic elements of animation implementation:

Play multiple pictures in a row in a unit time. This unit of time is usually in seconds. To get a sufficiently smooth video in a computer-rendered drawing, the number of pictures per second must be greater than or equal to the refresh rate of the monitor (this refresh rate is usually 60hz).

The state of the object (size, shape, color, position, angle, etc.) in each picture must be changed.

So how do we implement these two conditions in canvas?

How to draw 60 figures in 1 s

We can change this to draw a picture every 1max 60s. To do something at regular intervals in JavaScript, we use the timer setinterval.

What is a timer?

Setinerval (function f () {}, t), two parameters can be passed into the timer, one is the function and the other is the time. This code means that the function f is executed every t ms.

So let's use this to achieve what we need to draw a graph every 1max 60s:

SetInterval (function () {canCon.fillStyle= "black"; / / canCon.fill means to pick up a pen for drawing solid graphics on this piece of rice paper. / / it means to dip in a black ink / / to look at it together, it means to pick up a pen for drawing solid graphics and stick it with black ink canCon.arc. / / conceive to draw a circle on Xuan paper (X position of the center, Y position, radius of the circle, where to start and where to end) CanCon.fill (); / / draw}, 1000 Universe 60)

But there is not an animation effect yet, because the 60 graphics drawn in 1 s are exactly the same, so the next step is to change the state of the element as each figure is drawn.

By the way, I'd like to recommend a skirt, which is 537 in front, 631 in the middle, and 707 in the end. Children who want to learn from the front end can join us to study together and help each other. There is a free live class in the group every night, so don't add it if you don't want to study.

(537-631-707)

How do I 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;// gives an initial center position, and then each time you draw, the y position of the center moves down one distance, setInterval (function () {canCon.fillStyle= "black"). / / canCon.fill means to pick up a pen for drawing solid graphics on this piece of Xuan paper. / / it means to dip it into a black ink / / if you look at it together, it means to pick up a pen for drawing solid graphics and stick it with black ink canCon.arc. / / conceive to draw a circle on Xuan paper (X position of the center, Y position, radius of the circle, where to start and where to end) CanCon.fill (); / / draw}, 1000 Universe 60)

What we see at this time is not a moving circle, but more like an extended progress bar. The reason is actually very simple, every time we draw a new figure, we do not erase the original figure, such a picture is the result of the superposition of n multi-graphics. So we have to erase the original one every time we draw a new one, so how do we do that?

Vary=100;// gives an initial position of the center of the circle, and then each time you draw, the y position of the center moves down one distance setInterval (function () {canCon.clearRect (0jue 0500500); / / erases the coordinates of the upper left corner of a rectangle and the width and height of the rectangle canCon.fillStyle= "black" / / canCon.fill means to pick up a pen for drawing solid graphics on this piece of Xuan paper. / / it means to dip it into a black ink / / if you look at it together, it means to pick up a pen for drawing solid graphics and stick it with black ink canCon.arc. / / conceive to draw a circle on Xuan paper (X position of the center, Y position, radius of the circle, where to start and where to end) CanCon.fill (); / / draw}, 1000 Universe 60)

But it still has no effect at this time, so what is the situation? We can think back to the scenes we painted when we were kids, whether we need to lift the brush first when we erase a certain area of the paper, so we can erase some areas of the paper with an eraser, so we have to lift the pen before erasing an area of the canvas.

Vary=100;// gives an initial position of the center of the circle, and then each time you draw, the y position of the center moves down one distance setInterval (function () {canCon.beginPath (); / / lift the pen up canCon.clearRect (0c0500500); / / erase the coordinates of the upper left corner of a rectangle and the width and height of the rectangle canCon.fillStyle= "black" / / canCon.fill means to pick up a pen for drawing solid graphics on this piece of Xuan paper. / / it means to dip it into a black ink / / if you look at it together, it means to pick up a pen for drawing solid graphics and stick it with black ink canCon.arc. / / conceive to draw a circle on Xuan paper (X position of the center, Y position, radius of the circle, where to start and where to end) CanCon.fill (); / / draw}, 1000 Universe 60) here, I believe you have a deeper understanding of "html5 how to achieve canvas dynamic graphics effect", might as well come to the actual operation! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.