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

Editor to share with you how to use HTML5 Canvas to make animation special effects, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The basic steps of making canvas animation

Here are the basic steps for drawing an animation frame on canvas: 1. Clear canvas: except for the background image, you need to empty all the graphics you drew before.

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.

The above is all the contents of the article "how to make Animation Special effects with HTML5 Canvas". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.