当前位置：Gxlcms > html代码 > 利用HTML5Canvas制作键盘及鼠标动画的实例分享_html5教程技巧

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

时间：2021-07-01 10:21:17 帮助过：40人阅读

键盘控制小球移动

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

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