本文源码已经开源到Github上，感兴趣的可以自取，Github地址如下。
https://github.com/zhouxiongking/article-pages/tree/master/articles/movaByCanvas
HTML5
首先我们来看看小球直线运动的效果图，如下所示。
运动效果图
然后我们来剖析下，这个效果是如何实现的。
首先设置画布宽高档信息，然后利用canvas画出一个小球，设定初始状态，包括颜色，半径，初始位置等信息。
设定一个定时器，每次动态更新小球的位置，由于定时器韶光比较短，肉眼不雅观察下，相称于小球运动的效果。
通过上述的剖析，我们得出以下的代码。
对付canvas页面的HTML代码永久都只包含一个元素。
HTML代码
接下来是紧张的Javascript代码，首先是画布，小球初始信息的设置，并设置定时器函数。
小球初始信息
然后是实行的定时器函数，动态更新小球的位置，当小球运动出画布范围后，重新从出发点位置开始运动。
定时器函数
就这两段代码，就可以实现出以上的小球匀速直线运动的效果。
小球圆周运动首先，我们来看看小球匀速圆周运动的效果图，如下所示。
运动效果图
接下来我们同样来剖析下这个效果是如何实现的。
首先画出两个小圆，一个是蓝色，一个是赤色，设定初始信息和上述例子一样。
设定定时器，每次打消画布后，重新渲染，并且更新小蓝球的位置，由于是圆周运动，并不会涌现上述例子中移出画布的情形。
通过上面的描述，我们得出以下代码，HTML代码一样，这里不再给出。
首先是原始小蓝球的绘制，并设置定时器。
小蓝球的绘制
然后是小红球的绘制。
小红球的绘制
末了是定时器函数的实现，在该函数中会让小蓝球旋转一定的角度。
定时器函数
至此，小球的匀速圆周运动效果代码就完备实现了。
总结本日这篇文章紧张是利用HTML5的canvas实现了一些大略的小球运动效果，你学会了吗？
