如何利用HTML5 Canvas制作键盘及鼠标动画的实例分享

网络
在放大镜下，你可以看到每一片雪花都是一幅幅精美的图案：有的是晶莹的薄片，有的像白亮的银针，有的像一把张开的小扇，有的像夜空的星星……

键盘控制小球移动

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

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>html5canvas绘制可移动的小球入门示例</title>
  6. </head>
  7. <bodyonkeydown="moveBall(event)">
  9. <!--添加canvas标签，并加上红色边框以便于在页面上查看-->
  10. <canvasid="myCanvas"width="400px"height="300px"style="border:1pxsolidred;">
  11. 您的浏览器不支持canvas标签。
  12. </canvas>
  14. <scripttype="text/javascript">
  15. //获取Canvas对象(画布)
  16. varcanvas=document.getElementById("myCanvas");
  18. //表示圆球的类
  19. functionBall(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
  25. //向上移动
  26. this.moveUp=function(){
  27. this.y-=this.speed;
  28. if(this.y<this.radius){
  29. //防止超出上边界
  30. this.y=this.radius;
  31. }
  32. };
  34. //向右移动
  35. this.moveRight=function(){
  36. this.x+=this.speed;
  37. varmaxX=canvas.width-this.radius;
  38. if(this.x>maxX){
  39. //防止超出右边界
  40. this.x=maxX;
  41. }
  42. };
  44. //向左移动
  45. this.moveLeft=function(){
  46. this.x-=this.speed;
  47. if(this.x<this.radius){
  48. //防止超出左边界
  49. this.x=this.radius;
  50. }
  51. };
  53. //向下移动
  54. this.moveDown=function(){
  55. this.y+=this.speed;
  56. varmaxY=canvas.height-this.radius;
  57. if(this.y>maxY){
  58. //防止超出下边界
  59. this.y=maxY;
  60. }
  61. };
  62. }
  64. //绘制小球
  65. functiondrawBall(ball){
  66. if(typeofctx!="undefined"){
  67. ctx.beginPath();
  68. ctx.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,false);
  69. ctx.fill();
  70. }
  71. }
  73. //清空canvas画布
  74. functionclearCanvas(){
  75. if(typeofctx!="undefined"){
  76. ctx.clearRect(0,0,400,300);
  77. }
  78. }
  80. varball=newBall();
  81. //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
  82. if(canvas.getContext){
  83. //获取对应的CanvasRenderingContext2D对象(画笔)
  84. varctx=canvas.getContext("2d");
  85. drawBall(ball);
  86. }
  88. //onkeydown事件的回调处理函数
  89. //根据用户的按键来控制小球的移动
  90. functionmoveBall(event){
  91. switch(event.keyCode){
  92. case37://左方向键
  93. ball.moveLeft();
  94. break;
  95. case38://上方向键
  96. ball.moveUp();
  97. break;
  98. case39://右方向键
  99. ball.moveRight();
  100. break;
  101. case40://下方向键
  102. ball.moveDown();
  103. break;
  104. default://其他按键操作不响应
  105. return;
  106. }
  108. clearCanvas();//先清空画布
  109. drawBall(ball);//再绘制最新的小球
  110. }
  111. </script>
  112. </body>
  113. </html>

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


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

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

绘制左眼的代码

JavaScript Code复制内容到剪贴板
  1. varleftEye=newKinetic.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. varrightEye=newKinetic.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. varnose=newKinetic.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. varmouth=newKinetic.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. varmouth=newKinetic.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. varleftEyeTween=newKinetic.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. varrightEyeTween=newKinetic.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. varnoseTween=newKinetic.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. varmouthTween=newKinetic.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. <!DOCTYPEHTML>
  2. <html>
  3. <head>
  4. <style>
  5. body{
  6. margin:0px;
  7. padding:0px;
  8. }
  9. #container{
  10. background-color:black;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <divid="container"></div>
  16. <scriptsrc="/js/lib/kinetic-v5.0.1.min.js"></script>
  17. <scriptdefer="defer">
  18. varsw=578;
  19. varsh=400;
  20. varstage=newKinetic.Stage({
  21. container:'container',
  22. width:578,
  23. height:400
  24. });
  25. varlayer=newKinetic.Layer({
  26. y:-30
  27. });
  29. varleftEye=newKinetic.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. });
  38. varrightEye=newKinetic.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. });
  47. varnose=newKinetic.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. });
  55. varmouth=newKinetic.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. });
  63. layer.add(leftEye)
  64. .add(rightEye)
  65. .add(nose)
  66. .add(mouth);
  68. stage.add(layer);
  70. //tweens
  72. varleftEyeTween=newKinetic.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. });
  80. varrightEyeTween=newKinetic.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. });
  88. varnoseTween=newKinetic.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. });
  96. varmouthTween=newKinetic.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. });
  103. stage.getContainer().addEventListener('mouseover',function(){
  104. leftEyeTween.play();
  105. rightEyeTween.play();
  106. noseTween.play();
  107. mouthTween.play();
  108. });
  110. stage.getContainer().addEventListener('mouseout',function(){
  111. leftEyeTween.reverse();
  112. rightEyeTween.reverse();
  113. noseTween.reverse();
  114. mouthTween.reverse();
  115. });
  117. </script>
  118. </body>
  119. </html>

观看演示

以上就是如何利用HTML5 Canvas制作键盘及鼠标动画的实例分享。生命苦于无常。生活困于如常。更多关于如何利用HTML5 Canvas制作键盘及鼠标动画的实例分享请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
5分钟如何实现Canvas鼠标跟随动画背景
解析html5 canvas如何实现背景鼠标连线动态效果代码
canvas如何实现按住鼠标移动绘制出轨迹的示例代码
用HTML5如何实现鼠标滚轮事件放大缩小图片的功能
HTML5添加鼠标悬浮音响效果不如何使用FLASH