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

2020-03-24 16:27:06

字体：大中小

来源：转载

供稿：网友

键盘控制小球移动众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除，然后在另外一个位置重新绘制，如此反复，让静态图形按照一定的轨迹进行移动，就可以产生动画效果了。下面，我们在canvas上绘制一个实心小球，然后用键盘上的方向键控制小球的移动，从而产生动态效果。示例代码如下：JavaScript Code复制内容到剪贴板
metacharset= UTF-8 title html5canvas绘制可移动的小球入门示例 /title /head body /span> moveBall(event) !--添加canvas标签，并加上红色边框以便于在页面上查看-- canvasid= myCanvas width= 400px height= 300px >请使用支持html5的浏览器打开以下网页以查看实际效果(使用方向键进行移动)：
使用canvas绘制可移动的小球。
小丑笑脸
只需要了解很少的几个API，然后使用需要的动画参数，就能制作出这个有趣又能响应你的动作的Web动画。
第一步，画五官这个小丑没有耳朵和眉毛，所以只剩下三官，但它的两个眼睛我们要分别绘制，所以一共是四个部分。下面先看看代码。绘制左眼的代码
JavaScript Code复制内容到剪贴板
varleftEye=newKinetic.Line({ x:150, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 });
varrightEye=newKinetic.Line({ x:sw-250, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 });
varnose=newKinetic.Line({ points:[240,280,sw/2,300,sw-240,280], tension:0.5, closed:true, stroke:'white', strokeWidth:10 });
varmouth=newKinetic.Line({ points:[150,340,sw/2,380,sw-150,340,sw/2,sh], tension:0.5, closed:true, stroke:'red', strokeWidth:10 });
你会不会觉得很失望，原来就这么简单几行代码。没错，就是这么简单，相信你对自己能成为一名Web游戏动画程序员开始有信心了! 简单讲解一下上面的代码。Kinetic就是我们使用的js工具包。在页面的头部，我们需要这样引用它：JavaScript Code复制内容到剪贴板
varmouth=newKinetic.Line({ points:[150,340,sw/2,380,sw-150,340,sw/2,sh], tension:0.5, closed:true, stroke:'red', strokeWidth:10 });
其它几个分别是几个关键点，线条弹性，颜色，宽度等。这些都很容易理解。第二步，让图动起来这个动画之所以能吸引人，是因为它能响应你的鼠标动作，和用户有互动，这是一个成功的动画最关键的地方。如果你仔细观察，这个小丑五官的变化只是形状的变化，眼睛变大，嘴巴变大，鼻子变大，但特别的是这个变化不是瞬间变化，而是有过渡性的，这里面有一些算法，这就是最让人发愁的地方。幸运的是，这算法技术都非常的成熟，不需要我们来思考，在这些动画引擎库里都把这些技术封装成了非常简单方便的接口。下面我们来看看如何让动起来。左眼的动画
JavaScript Code复制内容到剪贴板
varleftEyeTween=newKinetic.Tween({ node:leftEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] });
varrightEyeTween=newKinetic.Tween({ node:rightEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] });
varnoseTween=newKinetic.Tween({ node:nose, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[220,280,sw/2,200,sw-220,280] });
varmouthTween=newKinetic.Tween({ node:mouth, duration:1, easing:Kinetic.Easings.ElasticEaseOut, points:[100,250,sw/2,250,sw-100,250,sw/2,sh-20] });
这些代码非常的简单，而且变量名能自释其意。稍微有点经验的程序员想看懂这些代码应该不难。基本每段代码都是让你提供一些点，指定动画动作的衰退模式和持续时间。完整的动画代码JavaScript Code复制内容到剪贴板
divid= container /div scriptsrc= /js/lib/kinetic-v5.0.1.min.js /script scriptdefer= defer varsw=578; varsh=400; varstage=newKinetic.Stage({ container:'container', width:578, height:400 }); varlayer=newKinetic.Layer({ y:-30 }); varleftEye=newKinetic.Line({ x:150, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 }); varrightEye=newKinetic.Line({ x:sw-250, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 }); varnose=newKinetic.Line({ points:[240,280,sw/2,300,sw-240,280], tension:0.5, closed:true, stroke:'white', strokeWidth:10 }); varmouth=newKinetic.Line({ points:[150,340,sw/2,380,sw-150,340,sw/2,sh], tension:0.5, closed:true, stroke:'red', strokeWidth:10 }); layer.add(leftEye) .add(rightEye) .add(nose) .add(mouth); stage.add(layer); //tweens varleftEyeTween=newKinetic.Tween({ node:leftEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] }); varrightEyeTween=newKinetic.Tween({ node:rightEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] }); varnoseTween=newKinetic.Tween({ node:nose, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[220,280,sw/2,200,sw-220,280] }); varmouthTween=newKinetic.Tween({ node:mouth, duration:1, easing:Kinetic.Easings.ElasticEaseOut, points:[100,250,sw/2,250,sw-100,250,sw/2,sh-20] }); stage.getContainer().addEventListener('mouseover',function(){ leftEyeTween.play(); rightEyeTween.play(); noseTween.play(); mouthTween.play(); }); stage.getContainer().addEventListener('mouseout',function(){ leftEyeTween.reverse(); rightEyeTween.reverse(); noseTween.reverse(); mouthTween.reverse(); }); /script /body /htmlhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：HTML基础：基本的HTML标签

下一篇：HTML5 Canvas的事件处理介绍