前言:
此时同学们对“html5canvas用途”大约比较看重,兄弟们都想要学习一些“html5canvas用途”的相关资讯。那么小编在网络上汇集了一些有关“html5canvas用途””的相关资讯,希望各位老铁们能喜欢,小伙伴们一起来了解一下吧!前言
在之前的一篇文章《用HTML5的canvas来画一个梦幻星空,来学习一下吧》中,我们使用HTML5的canvas画出了一个梦幻星空的效果。今天这篇文章我们继续使用canvas来画出几个简单的小球运动效果,一起来看看吧。
本文源码已经开源到Github上,感兴趣的可以自取,Github地址如下。
小球直线运动
首先我们来看看小球直线运动的效果图,如下所示。
然后我们来分析下,这个效果是如何实现的。
首先设置画布宽高等信息,然后利用canvas画出一个小球,设定初始状态,包括颜色,半径,初始位置等信息。
设定一个定时器,每次动态更新小球的位置,由于定时器时间比较短,肉眼观察下,相当于小球运动的效果。
通过上述的分析,我们得出以下的代码。
对于canvas页面的HTML代码永远都只包含一个元素。
接下来是主要的Javascript代码,首先是画布,小球初始信息的设置,并设置定时器函数。
然后是执行的定时器函数,动态更新小球的位置,当小球运动出画布范围后,重新从起点位置开始运动。
就这两段代码,就可以实现出以上的小球匀速直线运动的效果。
小球圆周运动
首先,我们来看看小球匀速圆周运动的效果图,如下所示。
接下来我们同样来分析下这个效果是如何实现的。
首先画出两个小圆,一个是蓝色,一个是红色,设定初始信息和上述例子一样。
设定定时器,每次清除画布后,重新渲染,并且更新小蓝球的位置,由于是圆周运动,并不会出现上述例子中移出画布的情况。
通过上面的描述,我们得出以下代码,HTML代码一样,这里不再给出。
首先是原始小蓝球的绘制,并设置定时器。
然后是小红球的绘制。
最后是定时器函数的实现,在该函数中会让小蓝球旋转一定的角度。
至此,小球的匀速圆周运动效果代码就完全实现了。
总结
今天这篇文章主要是利用HTML5的canvas实现了一些简单的小球运动效果,你学会了吗?
标签: #html5canvas用途