首页 web前端 H5教程 利用HTML5 Canvas制作键盘及鼠标动画的实例分享_html5教程技巧

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

May 16, 2016 pm 03:45 PM
canvas html5 动画

键盘控制小球移动

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

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

JavaScript Code复制内容到剪贴板
  1. nbsp;html>   
  2.   
  3.   
  4. "UTF-8">   
  5. html5 canvas绘制可移动的小球入门示例   
  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.   

观看演示

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

See all articles