本文的代码已经放到Github上了,感兴趣的可以自取,Github地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/starry/starry.html
HTML5
首先我们来看看通过canvas实现的星空效果图,如下所示。
效果图
代码实现接下来我们看看这个效果是如何通过代码一步步实现的。
首先来看看页面上的HTML代码,只有一个Div元素。
HTML代码
Javascript代码首先我们须要定义一些常量,比如画布的宽和高,星星数量,流星个数。在这个星空中流星实在是星星的一个,只是添加了动态效果。
页面初始化
然后是设定一个定时器,通过一段随机韶光天生一个流星的索引号。
流星索引号
紧接着来看看天生一个星星的方法,该方法返回一个星星的各项参数,包括x,y轴坐标,透明度,x,y轴偏移量。
天生星星的参数
然后是最主要的render方法,通过该方法可以将星星渲染至画布上,我们将这个方法拆开看,首先是对流星的绘制,流星索引号通过上面metor方法得到。
画流星
然后是对付星星各项参数的处理,比如有的星星天生的点坐标超出了屏幕宽高,有的透明度是负数,都要将其处理成正常参数。
各项参数判断
末了是在画布中进行绘制。
画布绘制
至此,这个画面效果的讲解完毕,如果代码精确的话,就可以看到文中涌现的效果图。
结束语本日这篇文章紧张是借助HTML5中的canvas画出了一个梦幻星空的效果,你学会了吗?