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.
14. >
15. //Get the Canvas object (canvas)
16. var canvas = document.getElementById("myCanvas");
18. //Represents the class of sphere
19. function Ball(x, y ,radius, speed){
20. this.x = x || 10; //The x coordinate of the sphere, the default is 10
21. this.y = y || 10; //The y coordinate of the sphere, the default is 10
22. this.radius = radius || 10; //The radius of the sphere, the default is 10
23. this.speed = speed || 5; //The moving speed of the ball, the default is 5
24.  
25. //Move up
26. this.moveUp = function(){
27. this.y -= this.speed;
28.  if(this.y
//Prevent exceeding the upper boundary
29.                                                                                                                                              
                                                              
30. };  
//Move right
this
33. .moveRight =
function
34. (){
this
35. .x = this.speed;
var
36. maxX = canvas.width - this.radius;
if
37. (this.x > maxX){  
//Prevent exceeding the right boundary
38.  this.x = maxX; 
39. }
40. };
41.  
42. //Move left
43. this.moveLeft = function(){
44. this.x -= this.speed;
45.  if(this.x
//Prevent exceeding the left boundary
46.  
this
47. .x = this.radius;                                                                
};
 
50. //Move down
51. this
.moveDown =
52. function(){ this
.y =
53. this.speed; var
maxY = canvas.height -
54. this.radius; if
(
55. this.y > maxY){ //Prevent exceeding the lower boundary
56. this
.y = maxY;
57.                                                                };
58. }
//Draw the ball
62. function drawBall(ball){
63.  if(
typeof
64. ctx != "undefined"){ ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2,
false
65. );
66. ctx.fill(); }
67. }
69. //Clear the canvas
70. function clearCanvas(){
71.  if(typeof ctx != "undefined"){
72. ctx.clearRect(0, 0, 400, 300);
73. }
74. }
76. var ball = new Ball();
77. //Simply detect whether the current browser supports the Canvas object to avoid prompting syntax errors in some browsers that do not support html5
78. if(canvas.getContext){ 
79. //Get the corresponding CanvasRenderingContext2D object (brush)
80. var ctx = canvas.getContext("2d");
81. drawBall(ball);
82. }
84. //Callback handler function for onkeydown event
85. //Control the movement of the ball according to the user’s keys
86. function moveBall(event){
87. switch(event.keyCode){
88.  case 37: //Left arrow key  
89. ball.moveLeft();
90. break;
91.  case 38: //Up direction key  
92. ball.moveUp();
93. break;
94.  case 39: //Right arrow key  
95. ball.moveRight();
96. break;
97.  case 40: //Down arrow key
98. ball.moveDown();
99. break;
100.  default: //Other key operations do not respond
101. return;
102. }
103.  
104. clearCanvas(); //Clear the canvas first
105. drawBall(ball); //Draw the latest ball
106. }

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

Watch the demo