javascript - 百度招聘页面的背景，那个可跟鼠标移动的星空背景是怎么做的啊

Question

http://talent.baidu.com/external/baidu/index.html#/
这是地址，点开以后，那个背景可以根据你鼠标的移动而变化，打开f12，找了半天元素没弄明白，我刚接受前端，对这个东西好奇又无知，希望有大神能解答一下。谢谢。

Answer 1

随便浏览了一下百度的源码（那个在homeView.js里的），大致实现的过程是：

1. 先看看浏览器支持Canvas不支持，如果支持就创建一个Canvas元素，然后画上几百个点，不支持就创建一个p往里扔几百个img元素，创建的时候根据规则设置了点到观察者的假想距离（影响后面的移动速度计算），并且点有大有小；

2. 监视mousemove事件，不停地更新一个鼠标位置对象，此对象用于后面的计算；

3. 搞一个1000/30毫秒周期的计时器，每个周期内计算各点的当前坐标，并重画Canvas或者调整img元素的位置；

4. 每个点的目标位置通过观察者（鼠标）的坐标计算得出，点在画布上的移动速度用点到观察者的假想距离计算出来，近的点移动快，远的点移动慢，这样有3D层次感；

5. 每个点的实际位置根据上一帧的实际位置和目标位置还有移动速度计算得出，这个计算结果用于第3步的重画步骤。

Answer 2

他们这个是写在canvas里的动画，判断一下鼠标方向再设置动画