龙空技术网

这几个有趣的小球运动效果,你知道如何使用HTML5的canvas实现吗?

前端周老师 148

前言:

此时同学们对“html5canvas用途”大约比较看重,兄弟们都想要学习一些“html5canvas用途”的相关资讯。那么小编在网络上汇集了一些有关“html5canvas用途””的相关资讯,希望各位老铁们能喜欢,小伙伴们一起来了解一下吧!

前言

在之前的一篇文章《用HTML5的canvas来画一个梦幻星空,来学习一下吧》中,我们使用HTML5的canvas画出了一个梦幻星空的效果。今天这篇文章我们继续使用canvas来画出几个简单的小球运动效果,一起来看看吧。

本文源码已经开源到Github上,感兴趣的可以自取,Github地址如下。

HTML5

小球直线运动

首先我们来看看小球直线运动的效果图,如下所示。

运动效果图

然后我们来分析下,这个效果是如何实现的。

首先设置画布宽高等信息,然后利用canvas画出一个小球,设定初始状态,包括颜色,半径,初始位置等信息。

设定一个定时器,每次动态更新小球的位置,由于定时器时间比较短,肉眼观察下,相当于小球运动的效果。

通过上述的分析,我们得出以下的代码。

对于canvas页面的HTML代码永远都只包含一个元素。

HTML代码

接下来是主要的Javascript代码,首先是画布,小球初始信息的设置,并设置定时器函数。

小球初始信息

然后是执行的定时器函数,动态更新小球的位置,当小球运动出画布范围后,重新从起点位置开始运动。

定时器函数

就这两段代码,就可以实现出以上的小球匀速直线运动的效果。

小球圆周运动

首先,我们来看看小球匀速圆周运动的效果图,如下所示。

运动效果图

接下来我们同样来分析下这个效果是如何实现的。

首先画出两个小圆,一个是蓝色,一个是红色,设定初始信息和上述例子一样。

设定定时器,每次清除画布后,重新渲染,并且更新小蓝球的位置,由于是圆周运动,并不会出现上述例子中移出画布的情况。

通过上面的描述,我们得出以下代码,HTML代码一样,这里不再给出。

首先是原始小蓝球的绘制,并设置定时器。

小蓝球的绘制

然后是小红球的绘制。

小红球的绘制

最后是定时器函数的实现,在该函数中会让小蓝球旋转一定的角度。

定时器函数

至此,小球的匀速圆周运动效果代码就完全实现了。

总结

今天这篇文章主要是利用HTML5的canvas实现了一些简单的小球运动效果,你学会了吗?

标签: #html5canvas用途