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

这篇文章主要介绍了利用HTML5 Canvas制作键盘及鼠标动画的实例,文中分别分享了一个键盘控制的小球移动和鼠标触发的小丑小脸例子,需要的朋友可以参考下

键盘控制小球移动

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

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

JavaScript Code复制内容到剪贴板

"UTF-8">
html5 canvas绘制可移动的小球入门示例
"moveBall(event)">
"myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。

请使用支持html5的浏览器打开以下网页以查看实际效果(使用方向键进行移动)：
使用canvas绘制可移动的小球。

小丑笑脸
只需要了解很少的几个API，然后使用需要的动画参数，就能制作出这个有趣又能响应你的动作的Web动画。
第一步，画五官

这个小丑没有耳朵和眉毛，所以只剩下三官，但它的两个眼睛我们要分别绘制，所以一共是四个部分。下面先看看代码。

绘制左眼的代码

JavaScript Code复制内容到剪贴板

var leftEye = new Kinetic.Line({
x: 150,
points: [0, 200, 50, 190, 100, 200, 50, 210],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
});

绘制右眼的代码

JavaScript Code复制内容到剪贴板

var rightEye = new Kinetic.Line({
x: sw - 250,
points: [0, 200, 50, 190, 100, 200, 50, 210],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
});

绘制鼻子的代码

JavaScript Code复制内容到剪贴板

var nose = new Kinetic.Line({
points: [240, 280, sw/2, 300, sw-240,280],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
});

绘制嘴巴的代码

JavaScript Code复制内容到剪贴板

var mouth = new Kinetic.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复制内容到剪贴板

var mouth = new Kinetic.Line({
points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
tension: 0.5,
closed: true,
stroke: 'red',
strokeWidth: 10
});

其它几个分别是几个关键点，线条弹性，颜色，宽度等。这些都很容易理解。

第二步，让图动起来

这个动画之所以能吸引人，是因为它能响应你的鼠标动作，和用户有互动，这是一个成功的动画最关键的地方。如果你仔细观察，这个小丑五官的变化只是形状的变化，眼睛变大，嘴巴变大，鼻子变大，但特别的是这个变化不是瞬间变化，而是有过渡性的，这里面有一些算法，这就是最让人发愁的地方。幸运的是，这算法技术都非常的成熟，不需要我们来思考，在这些动画引擎库里都把这些技术封装成了非常简单方便的接口。下面我们来看看如何让动起来。

左眼的动画

JavaScript Code复制内容到剪贴板