网站首页
精品模板
会员模板
建站资源
站长素材
建站教程
编程笔记
编程问答
编程笔记
html教程 css教程 前端开发 cms教程 seo优化 网页设计 服务器 数据库 平面设计 电脑教程 编程教程 互联网 移动开发 php编程 java编程 实例代码 Python编程
沃梦达建站-编程笔记-html教程-正文

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

2016-03-23html教程
383

键盘控制小球移动

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

观看演示

The End

相关推荐

让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main，header，footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理？你可能花几天也想不明白，但谁在意呢！这个脚本几乎是所有正式网站必用...
2017-04-15 html教程
586
HTML5之Canvas基础绘图教程
HTML5 火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 1、使用Canvas绘制直线： !doctype html ht...
2016-09-19 html教程
602
HTML5 respond.js 解决IE6~8的响应式布局问题
响应式布局，理想状态是，对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器，但是IE8在市场当中仍然占据了比较大量的市场份额，使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢？这里我们需要借助这...
2016-09-19 html教程
848
微软开源新一代浏览器的JavaScript引擎核心代码
近日，微软宣布开源Chakra的核心组件。Chakra是微软新一代浏览器 Microsoft Edge的JavaScript引擎。相关代码将于2016年1月上传到微软的GitHub账号，项目名称为 ChakraCore，遵循MIT许可协议。 ...，HTML5中国，中国最大的HTML5中文门户。...
2016-04-07 html教程
41
Google Chrome终于支持CSS Variables了
这篇文章报道的不是“新闻”，因为W3C早已开始着手CSS变量方面的工作。至于Google，则要追溯到11月初，当时该公司主要开发人员之一的Addy Osmani宣布了率先在Chrome Canary中引入对CSS变量的支持。 ...，HTML5中国，中国最大的HTML5中文门户。...
2016-04-07 html教程
27
如果你坚持写代码,25年后你将会遇到这些...
25年后，你发的编程知识经验还会增加，但薪水却不加了；25年后，如果你还热爱编程便不会选择转行去当管理人员；25年后，你想和好友去玩耍，而经理却让你加班；那么你是否想过这25年之间做出另一种选择呢？ ...，HTML5中国，中国最大的HTML5中文门户。...
2016-04-07 html教程
48

热门文章

1input输入框的各种样式 2Bootstrap分页插件--Bootstrap Paginator 3Html5实现二维码扫描并解析 4Html5 audio标签样式的修改 5HTML5 Canvas实现烟花绽放特效 6HTML5 video播放器全屏(fullScreen)方法实例 7深入解析HTML5中的Blob对象的使用 8HTML表格宽度和高度属性WIDTH、HEIGHT

热门精品源码

最新VIP资源

1多功能实用站长工具箱html功能模板 2多风格简历在线生成程序网页模板 3论文相似度查询系统源码 4响应式旅游景点宣传推广页面模板 5在线起名宣传推广网站源码 6酷黑微信小程序网站开发宣传页模板 7房产销售交易中介网站模板 8小学作业自动生成程序