您好!欢迎来到e资源!本站资源24小时自动发货,海量精品课程资源免费下载!

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

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

键盘控制小球移动

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

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

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   

  2. <html>   

  3. <head>   

  4. <meta charset="UTF-8">   

  5. <title>html5 canvas绘制可移动的小球入门示例</title>   

  6. </head>   

  7. <body onkeydown="moveBall(event)">   

  8.   

  9. <!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->   

  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   

  11. 您的浏览器不支持canvas标签。   

  12. </canvas>   

  13.   

  14. <script type="text/javascript">   

  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. </script>   

  112. </body>   

  113. </html>   

请使用支持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. <!DOCTYPE HTML>   

  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.     <div id="container"></div>   

  16.     <script src="/js/lib/kinetic-v5.0.1.min.js"></script>   

  17.     <script defer="defer">   

  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.     </script>   

  118.   </body>   

  119. </html>  

观看演示


开通vip
首页 导航 会员 客服 微信
QQ 微信 邮箱 TOP