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:

JavaScript CodeCopy content to clipboard

4. "UTF-8">
7. "moveBall(event)">
10. "myCanvas" width="400px" height="300px" style="border: 1px solid red;">
11. Your browser does not support the canvas tag.

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

JavaScript CodeCopy content to clipboard

1. var leftEye = new Kinetic.Line({
2. x: 150,
3. points: [0, 200, 50, 190, 100, 200, 50, 210],
4. tension: 0.5,
5. closed: true,
6. stroke: 'white',
7. strokeWidth: 10
8. });

Code for drawing the right eye

JavaScript CodeCopy content to clipboard

1. var rightEye = new Kinetic.Line({
2. x: sw - 250,
3. points: [0, 200, 50, 190, 100, 200, 50, 210],
4. tension: 0.5,
5. closed: true,
6. stroke: 'white',
7. strokeWidth: 10
8. });

Code for drawing nose

JavaScript CodeCopy content to clipboard

1. var nose = new Kinetic.Line({
2. points: [240, 280, sw/2, 300, sw-240,280],
3. tension: 0.5,
4. closed: true,
5. stroke: 'white',
6. strokeWidth: 10
7. });

Code for drawing mouth

JavaScript CodeCopy content to clipboard

1. var mouth = new Kinetic.Line({
2. points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
3. tension: 0.5,
4. closed: true,
5. stroke: 'red',
6. strokeWidth: 10
7. });

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:

JavaScript CodeCopy content to clipboard

1. var mouth = new Kinetic.Line({
2. points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
3. tension: 0.5,
4. closed: true,
5. stroke: 'red',
6. strokeWidth: 10
7. });

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

JavaScript CodeCopy content to clipboard

1. var leftEyeTween = new Kinetic.Tween({
2. node: leftEye,
3. duration: 1,
4. easing: Kinetic.Easings.ElasticEaseOut,
5. y: -100,
6. points: [0, 200, 50, 150, 100, 200, 50, 200]
7. });

Right eye animation

JavaScript CodeCopy content to clipboard

1. var rightEyeTween = new Kinetic.Tween({
2. node: rightEye,
3. duration: 1,
4. easing: Kinetic.Easings.ElasticEaseOut,
5. y: -100,
6. points: [0, 200, 50, 150, 100, 200, 50, 200]
7. });

Animation of nose

JavaScript CodeCopy content to clipboard

1. var noseTween = new Kinetic.Tween({
2. node: nose,
3. duration: 1,
4. easing: Kinetic.Easings.ElasticEaseOut,
5. y: -100,
6. points: [220, 280, sw/2, 200, sw-220,280]
7. });

Mouth animation

JavaScript CodeCopy content to clipboard

1. var mouthTween = new Kinetic.Tween({
2. node: mouth,
3. duration: 1,
4. easing: Kinetic.Easings.ElasticEaseOut,
5. points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
6. });

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

JavaScript CodeCopy content to clipboard

1.   
2.   
3.      
4.        
5.      
6.      
7.     
   "container">
     
8.     "/js/lib/kinetic-v5.0.1.min.js">   
9.     "defer">   
10.       var sw = 578;   
11.       var sh = 400;   
12.       var stage = new Kinetic.Stage({   
13.         container: 'container',   
14.         width: 578,   
15.         height: 400   
16.       });   
17.       var layer = new Kinetic.Layer({   
18.         y: -30    
19.       });   
20.   
21.       var leftEye = new Kinetic.Line({   
22.         x: 150,   
23.         points: [0, 200, 50, 190, 100, 200, 50, 210],   
24.         tension: 0.5,   
25.         closed: true,   
26.         stroke: 'white',   
27.         strokeWidth: 10        
28.       });   
29.   
30.       var rightEye = new Kinetic.Line({   
31.         x: sw - 250,   
32.         points: [0, 200, 50, 190, 100, 200, 50, 210],   
33.         tension: 0.5,   
34.         closed: true,   
35.         stroke: 'white',   
36.         strokeWidth: 10      
37.       });   
38.   
39.       var nose = new Kinetic.Line({   
40.         points: [240, 280, sw/2, 300, sw-240,280],   
41.         tension: 0.5,   
42.         closed: true,   
43.         stroke: 'white',   
44.         strokeWidth: 10   
45.       });   
46.   
47.       var mouth = new Kinetic.Line({   
48.         points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],   
49.         tension: 0.5,   
50.         closed: true,   
51.         stroke: 'red',   
52.         strokeWidth: 10   
53.       });   
54.   
55.       layer.add(leftEye)   
56.            .add(rightEye)   
57.            .add(nose)   
58.            .add(mouth);   
59.   
60.       stage.add(layer);   
61.   
62.       // tweens   
63.   
64.       var leftEyeTween = new Kinetic.Tween({   
65.         node: leftEye,   
66.         duration: 1,   
67.         easing: Kinetic.Easings.ElasticEaseOut,   
68.         y: -100,   
69.         points: [0, 200, 50, 150, 100, 200, 50, 200]   
70.       });    
71.   
72.       var rightEyeTween = new Kinetic.Tween({   
73.         node: rightEye,   
74.         duration: 1,   
75.         easing: Kinetic.Easings.ElasticEaseOut,   
76.         y: -100,   
77.         points: [0, 200, 50, 150, 100, 200, 50, 200]   
78.       });   
79.   
80.       var noseTween = new Kinetic.Tween({   
81.         node: nose,   
82.         duration: 1,   
83.         easing: Kinetic.Easings.ElasticEaseOut,   
84.         y: -100,   
85.         points: [220, 280, sw/2, 200, sw-220,280]   
86.       });    
87.   
88.       var mouthTween = new Kinetic.Tween({   
89.         node: mouth,   
90.         duration: 1,   
91.         easing: Kinetic.Easings.ElasticEaseOut,   
92.         points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]   
93.       });    
94.   
95.       stage.getContainer().addEventListener('mouseover', function() {   
96.         leftEyeTween.play();   
97.         rightEyeTween.play();   
98.         noseTween.play();   
99.         mouthTween.play();   
100.       });   
101.   
102.       stage.getContainer().addEventListener('mouseout', function() {   
103.         leftEyeTween.reverse();   
104.         rightEyeTween.reverse();   
105.         noseTween.reverse();   
106.         mouthTween.reverse();   
107.       });   
108.   
109.        
110.      
111.   

Watch the demo