• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    利用HTML5 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>  

    观看演示

    上一篇：通过HTML5 Canvas API绘制弧线和圆形的教程
    下一篇：HTML5 3D衣服摇摆动画特效
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯

    时间：9:00-21:00 (节假日不休)

    地址：江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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