社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > H5教程 > 利用HTML5 Canvas制作键盘及鼠标动画的实例分享_html5教程技巧

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

WBOY
发布： 2016-05-16 15:45:44
原创
2335 人浏览过

键盘控制小球移动

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

观看演示

相关标签：
canvas html5 动画
来源：php.cn
上一篇：HTML5 3D衣服摇摆动画特效_html5教程技巧 下一篇：探索HTML5本地存储功能运用技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如何让我的图像显示在页面的主显示屏上？ 我想做的是使用NASAAPI接收一些照片。然后在我的网页的缩略图和主显示屏上显示这些照片。我只是弄清楚为什么代码不从缩略图中获取图像并将其显示在页面上。我还使用HTML5及以上版本...
来自于 2024-04-06 15:33:12
0
1
433
PDF文件能够运行HTML5和Javascript吗？ 我有一个愚蠢的想法，想尝试制作一个在任何计算机上都不会被阻止的程序，因为它将嵌入在PDF中（我听说Javascript可以在PDF中运行）。它将在PDF文件中运行HTML5和Jav...
来自于 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什么区别？ 我只是想知道HTMLLivingStandard（又名新的HTML5规范）中的属性enctype和formenctype之间有什么区别？我一直在阅读《面向开发人员的HTML标准》，...
来自于 2024-04-02 11:47:56
0
1
275
使页面适合移动设备吗？ 我有很多网页和一些网站。问题是，我是一个初学者。我使用基本的html5和css3，但我不知道如何使它们放大、缩小并且适合移动设备。例如，这是我的页面之一和我的网站之一，您可以在其中...
来自于 2024-04-01 20:42:38
0
1
259
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板