Sharing examples of using HTML5 Canvas to create keyboard and mouse animations_html5 tutorial skills

Keyboard controls the movement of the ball

As we all know, the animation we see is actually a series of rapid switching of static images, which gives the naked eye the visual effect of "moving images" due to visual afterimages. After understanding this, drawing animation effects on canvas becomes relatively simple. We only need to clear a certain static graphic first, and then redraw it at another location. Repeat this to make the static graphic move according to a certain trajectory to produce an animation effect.

Next, we draw a solid ball on the canvas, and then use the arrow keys on the keyboard to control the movement of the ball to produce dynamic effects. The sample code is as follows:

Please use a browser that supports HTML5 to open the following web page to see the actual effect (use the arrow keys to move):
Use canvas to draw a movable ball.

Clown Smiley Face
You only need to understand a few APIs, and then use the required animation parameters to create this interesting web animation that can respond to your movements.
The first step is to draw the facial features

This clown has no ears and eyebrows, so only three organs are left, but we have to draw its two eyes separately, so there are four parts in total. Let’s take a look at the code first.

Code for drawing left eye

Code for drawing the right eye

Code for drawing nose

Code for drawing mouth

Would you feel disappointed? It turns out that it’s just a few lines of code. Yes, it’s that simple. I believe you are starting to feel confident that you can become a web game animation programmer!

Briefly explain the above code. Kinetic is the js toolkit we use. At the head of the page, we need to reference it like this:

The others are several key points, line elasticity, color, width, etc. These are easy to understand.

The second step is to make the picture move

The reason why this animation is attractive is that it can respond to your mouse movements and interact with the user. This is the most critical aspect of a successful animation. If you observe carefully, the changes in the clown's facial features are just changes in shape. The eyes become larger, the mouth becomes larger, and the nose becomes larger. But the special thing is that this change is not an instant change, but a transitional one. There are some algorithms in it. This is the most worrying part. Fortunately, these algorithm technologies are very mature and do not require us to think about them. These animation engine libraries have encapsulated these technologies into very simple and convenient interfaces. Let’s take a look at how to get things moving.

Left eye animation

Right eye animation

Animation of nose

Mouth animation

The code is very simple and the variable names are self-explanatory. It should not be difficult for programmers with a little experience to understand these codes. Basically every piece of code lets you provide some points to specify the decay mode and duration of the animation action.

Complete animation code

Watch the demo