canvas实现线球联动

这篇文章我将通过canvas来为大家实现一个简单的线球联动效果废话少说，下面放效果图

实现效果

首先还是定义一个canvas画布 ，并通过style把其给设置成块元素

<canvas id="can"></canvas>

下面来说实现思路，实现一个构造小球函数，并初始化40个小球，再定义一个画线方法，通过判断俩个小球之间的距离来决定是否画线，最后通过定时器不断清空初始画布，让小球实现可以移动，并调用画线方法来决定是否需要画线

先来构造小球函数，定义他们的圆心(x,y) ， 以及半径和他们的初始速度，因为每个小球都具有不同的初始圆心以及速度，（这里的速度我是用来实现小球的圆心进行改变，下面代码会细说）但是他们都是小球，所以将他们共同点提取出来生成一个构造函数也就是类，在这里我才用的是构造函数，并不是es6的类来构造

// 定义小球构造器
        var init = function () {
            this.x = Math.random() * cw