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

This article mainly introduces how to use html5 canvas jump Mini Game effect related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that everyone after reading this article on how to use html5 canvas jump Mini Game effect article will have a harvest, let's take a look at it.

To animate an image in HTML5 canvas, you need to draw the image of each frame and then transition from one frame to the next in a very short time to form an animation effect. This is actually a kind of visual deception, the principle is like playing a movie, each frame on the film is a picture, and then quickly play them, in the eyes of people is a complete animation effect.

The basic steps of making canvas animation

Here are the basic steps for drawing an animation frame on canvas:

1. Clear canvas: you need to clear all the graphics you have drawn before, except for the background image.

2, save the state of canvas: if you use different drawing states (such as stroke size and fill color, etc.) in this step, and you want to draw each frame using the same original state, you need to save these original states.

3. Draw animated graphics: in this step you need to draw the graphic elements of those animations.

4. Restore the canvas state: if you have previously saved the canvas state, restore them in this step.

Control canvas animation

We need a way to execute our drawing function within a specified period of time. There are two ways to control the execution of the animation.

The first is to use the methods on the following three window objects: window.setInterval (), window.setTimeout (), and window.requestAnimationFrame (). They can all call the specified function within a specified time.

SetInterval (function, delay): executes the function specified by function repeatedly every delay millisecond.

SetTimeout (function, delay): executes the function specified by function in delay milliseconds.

RequestAnimationFrame (callback): informs the browser that you need to perform an animation and asks the browser to call the specified function to update the animation before the next redraw.

The second method is to use event listening. For example, if you need to make a Mini Game, you can listen for keyboard and mouse events, and then use the setTimeout () method to animate when capturing the corresponding events.

For better animation performance, we usually use the requestAnimationFrame () method. When the browser is equipped to draw the next frame of animation, we can pass the drawing function as an argument to this method.

By signaling to the browser when the browser is ready to draw the next frame, you can get the browser to hardware accelerate your animation, which is much better than using setTimeout () to draw the animation.

Here is a sample code:

Function animate () {

ReqAnimFrame = window.mozRequestAnimationFrame | |

Window.webkitRequestAnimationFrame | |

Window.msRequestAnimationFrame | |

Window.oRequestAnimationFrame

ReqAnimFrame (animate)

Draw ()

}

The animate () function first gets a reference to the requestAnimationFrame () function. Note that different names are used in different browsers. The variable reqAnimFrame is set to different values in different browsers, but it cannot be empty.

The reqAnimFrame () method is then called, passing in the animate () function as an argument. When the browser is ready to draw the next frame of animation, the animate () function is called.

Finally, the animate () function calls the draw () method. The draw () method is not written in the above code, but what it actually does is the four steps mentioned earlier to draw an animation frame: clear the canvas, save the state, draw the graph, and restore the state.

Another thing to note is that the animate () function must be called once to start the animation, otherwise the requestAnimationFrame () function will never be called and the animation will not be executed properly.

This is the end of the article on "how to use html5's canvas to jump Mini Game effect". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use html5's canvas jump Mini Game effect". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.