前端教程：用 Canvas 编织璀璨星空图

是不是还蛮酷的呢？利用周末时间我们来学习并实现一下，本文我们就来一点一点分析怎么实现它！

分析

首先我们看看这个效果具体有哪些要点。首先，这么炫酷的效果肯定是要用到 Canvas 了，每个星星可以看作为一个粒子，因此，整个效果实际上就是粒子系统了。此外，我们可以发现每个粒子之间是相互连接的，只不过离的近的粒子之间的连线较粗且透明度较低，而离的远的则相反。

开始 Coding

HTML 部分

这部分我就简单放了一个 标签，设置样式使其填充全屏。

然后为了让所有元素没有间距和内部，我还加了一条全局样式：

• {

margin: 0;

padding: 0;

}

JavaScript 部分

下面我们来写核心的代码。首先我们要得到那个 canvas 并得到绘制上下文：

var canvasEl = document.getElementById(‘canvas’);

var ctx = canvasEl.getContext(‘2d’);

var mousePos = [0, 0];

紧接着我们声明两个变量，分别用于存储“星星”和边：

var nodes = [];

var edges = [];

下一步，我们做些准备工作，就是让画布在窗口大小发生变化时重新绘制，并且调整自身分辨率：

window.onresize = function () {

canvasEl.width = document.body.clientWidth;

canvasEl.height = canvasEl.clientHeight;

if (nodes.length == 0) {

constructNodes();

}

rend