首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onMarch 15, 2016

键盘控制小球移动

众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在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>  

观看演示

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
萌新HTML5 入门指南（二）
Nov 09 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 #HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 #HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 #HTML / CSS
HTML5实现多张图片上传功能
Mar 11 #HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 #HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 #HTML / CSS
HTML5的新特性(1)
Mar 03 #HTML / CSS
制度(225) 保证书(97) 接收函(23) 计划书(118) 感谢信(72) 寄语(276) 证明书(326) 方案(1080) 答谢词(97) 评语(336)
You might like
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
vue中动态select的使用方法示例
2019/10/28 Javascript
微信小程序自定义导航栏（模板化）
2019/11/15 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python实现bitmap数据结构详解
2014/02/17 Python
python绘图库Matplotlib的安装
2014/07/03 Python
Python3读取zip文件信息的方法
2015/05/22 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
复古风格的女装和装饰品：ModCloth
2017/12/29 全球购物
丝芙兰新加坡官网：Sephora新加坡
2018/12/04 全球购物
咖啡店的创业计划书，让你hold不住
2014/01/03 职场文书
法律六进活动方案
2014/03/13 职场文书
机电专业求职信
2014/06/14 职场文书
简历中自我评价范文
2015/03/11 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书