利用HTML5 Canvas制作键盘及鼠标动画的实例分享_html5教程技巧

键盘控制小球移动

众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除，然后在另外一个位置重新绘制，如此反复，让静态图形按照一定的轨迹进行移动，就可以产生动画效果了。

下面，我们在canvas上绘制一个实心小球，然后用键盘上的方向键控制小球的移动，从而产生动态效果。示例代码如下：

JavaScript Code复制内容到剪贴板

1. nbsp;html>   
2.   
3.   
4. "UTF-8">   
5.   
6.   
7. "moveBall(event)">   
8.   
9.   
10. "myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
11. 您的浏览器不支持canvas标签。   
12.   
13.   
14. <script><span class="string">"text/javascript"</script>>   
15. //获取Canvas对象(画布)   
16. var canvas = document.getElementById("myCanvas");   
17.   
18. //表示圆球的类   
19. function Ball(x, y ,radius, speed){   
20.     this.x = x || 10;   //圆球的x坐标，默认为10   
21.     this.y = y || 10;   //圆球的y坐标，默认为10   
22.     this.radius = radius || 10; //圆球的半径，默认为10   
23.     this.speed = speed || 5;    //圆球的移动速度，默认为5   
24.        
25.     //向上移动   
26.     this.moveUp = function(){   
27.         this.y -= this.speed;   
28.         if(this.y this.radius){   
29.             //防止超出上边界   
30.             this.y = this.radius;              
31.         }   
32.     };   
33.        
34.     //向右移动   
35.     this.moveRight = function(){   
36.         this.x += this.speed;   
37.         var maxX = canvas.width - this.radius;   
38.         if(this.x > maxX){   
39.             //防止超出右边界   
40.             this.x = maxX;             
41.         }   
42.     };   
43.        
44.     //向左移动   
45.     this.moveLeft = function(){   
46.         this.x -= this.speed;   
47.         if(this.x this.radius){   
48.             //防止超出左边界   
49.             this.x = this.radius;              
50.         }   
51.     };   
52.        
53.     //向下移动   
54.     this.moveDown = function(){   
55.         this.y += this.speed;   
56.         var maxY = canvas.height - this.radius;   
57.         if(this.y > maxY){   
58.             //防止超出下边界   
59.             this.y = maxY;   
60.         }   
61.     };   
62. }   
63.   
64. //绘制小球   
65. function drawBall(ball){   
66.     if(typeof ctx != "undefined"){   
67.         ctx.beginPath();   
68.         ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);   
69.         ctx.fill();   
70.     }   
71. }   
72.   
73. //清空canvas画布   
74. function clearCanvas(){   
75.     if(typeof ctx != "undefined"){   
76.         ctx.clearRect(0, 0, 400, 300);         
77.     }   
78. }   
79.   
80. var ball = new Ball();   
81. //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
82. if(canvas.getContext){     
83.     //获取对应的CanvasRenderingContext2D对象(画笔)   
84.     var ctx = canvas.getContext("2d");   
85.     drawBall(ball);   
86. }   
87.   
88. //onkeydown事件的回调处理函数   
89. //根据用户的按键来控制小球的移动   
90. function moveBall(event){   
91.     switch(event.keyCode){   
92.         case 37:    //左方向键   
93.             ball.moveLeft();   
94.             break;   
95.         case 38:    //上方向键   
96.             ball.moveUp();   
97.             break;   
98.         case 39:    //右方向键   
99.             ball.moveRight();   
100.             break;   
101.         case 40:    //下方向键   
102.             ball.moveDown();   
103.             break;   
104.         default:    //其他按键操作不响应   
105.             return;   
106.     }   
107.        
108.     clearCanvas();  //先清空画布   
109.     drawBall(ball); //再绘制最新的小球   
110. }   
111.   
112.   
113.    

请使用支持html5的浏览器打开以下网页以查看实际效果(使用方向键进行移动)：
使用canvas绘制可移动的小球。

小丑笑脸
只需要了解很少的几个API，然后使用需要的动画参数，就能制作出这个有趣又能响应你的动作的Web动画。
第一步，画五官

这个小丑没有耳朵和眉毛，所以只剩下三官，但它的两个眼睛我们要分别绘制，所以一共是四个部分。下面先看看代码。

绘制左眼的代码

JavaScript Code复制内容到剪贴板

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.      });  

绘制右眼的代码

JavaScript Code复制内容到剪贴板

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.       });  

绘制鼻子的代码

JavaScript Code复制内容到剪贴板

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.       });  

绘制嘴巴的代码

JavaScript Code复制内容到剪贴板

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.       });  

你会不会觉得很失望，原来就这么简单几行代码。没错，就是这么简单，相信你对自己能成为一名Web游戏动画程序员开始有信心了!

简单讲解一下上面的代码。Kinetic就是我们使用的js工具包。在页面的头部，我们需要这样引用它：

JavaScript Code复制内容到剪贴板

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.       });  

其它几个分别是几个关键点，线条弹性，颜色，宽度等。这些都很容易理解。

第二步，让图动起来

这个动画之所以能吸引人，是因为它能响应你的鼠标动作，和用户有互动，这是一个成功的动画最关键的地方。如果你仔细观察，这个小丑五官的变化只是形状的变化，眼睛变大，嘴巴变大，鼻子变大，但特别的是这个变化不是瞬间变化，而是有过渡性的，这里面有一些算法，这就是最让人发愁的地方。幸运的是，这算法技术都非常的成熟，不需要我们来思考，在这些动画引擎库里都把这些技术封装成了非常简单方便的接口。下面我们来看看如何让动起来。

左眼的动画

JavaScript Code复制内容到剪贴板

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.       });  

右眼的动画

JavaScript Code复制内容到剪贴板

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.       });  

鼻子的动画

JavaScript Code复制内容到剪贴板

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.       });  

嘴巴的动画

JavaScript Code复制内容到剪贴板

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.       });  

这些代码非常的简单，而且变量名能自释其意。稍微有点经验的程序员想看懂这些代码应该不难。基本每段代码都是让你提供一些点，指定动画动作的衰退模式和持续时间。

完整的动画代码

JavaScript Code复制内容到剪贴板

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.   

观看演示