果图

各位长友大家早上好！

今天给各位带来的是 HTML5+JS全屏星空特效源码！

有想要文件版源码的可以私聊小编哦！

废话不多说，上源码！

CSS：

body {margin:0 auto;overflow:hidden;}

/*=============第一页=============*/

.header{

margin:0 auto;

width:100%;

height:640px;

background-color:#000;

position:relative;

}

言

随着HTML5的火热，越来越多的人投入到HTML5开发中了，canvas作为HTML5中比较重要的一个元素，在很多官网的主页面中被使用到。今天我们一起来看看如何使用canvas画出一个梦幻的星空背景，还会有流星运动。

本文的代码已经放到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画出了一个梦幻星空的效果，你学会了吗？

言

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

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

https://github.com/zhouxiongking/article-pages/tree/master/articles/movaByCanvas

HTML5

小球直线运动

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

运动效果图

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

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

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

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

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

HTML代码

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

小球初始信息

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

定时器函数

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

小球圆周运动

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

运动效果图

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

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

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

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

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

小蓝球的绘制

然后是小红球的绘制。

小红球的绘制

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

定时器函数

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

总结

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