<!-- 更新：这里曾经是一个 iframe，不过目前这个已经无法访问了。 -->
<iframe src="http://bin16.farbox.com/lab/canvas-line-error.html" width="320" height="240"></iframe>
看到 http://sebug.net/ 主页的效果很棒，打算模仿一下。当然我知道这和我放在上面的效果并不一样，先不管这个。
我观察了这个网站的效果：
- 左中右三块 canvas，是各自独立的。
- 每个小原点从边缘出现，移动方向是固定的，直到移出边界。
- 小圆点速度基本一致，这点不重要。
- 每两个原点足够接近的时候会有线连接它们两个。
- 距离越短线越透明，好像粗细隐约有些变化，看不清清楚，不过不影响。
流程就是
- 生成一堆点的数组，元素是包含了坐标，角度或者分速度的对象
- 每一轮循环把所有点绘制在 canvas 里
- 对与任意两点计算间距，根据合适的公式计算透明度或者线宽，绘制连线
- 给每一个点的坐标加上对应的速度得到移动后的坐标，返回给点对象的数组
- 利用 setTimeout 开动循环
但是我在过程中对 beginPath 和 closePath 有点迷惑，总是得到一些莫名其妙的效果，比如你现在看到的 canvas 里面总会有一个硕大的圆圈斜穿过去，它是依附于某一个点的。而且还有因为 beginPath 和 closePath 导致的别的一些问题存在，比如透明度会失效，比如不会画出连线。。
现在我嵌进来的这个是我注释掉每次连线完成后把透明度恢复为1的语句得到的效果。