JavaScript キャンバスで動的な点と線の効果を実現

var c = document.getElementById("myCanvas");
      //キャンバスのサイズを設定します c.height = document.body.offsetHeight;
      c.width = document.body.offsetWidth;
      //キャンバスはウィンドウのサイズに従います window.onresize = function() {
        c.height = ドキュメント本体のオフセット高さ;
        c.width = document.body.offsetWidth;
      };

      var theCanvas = c.getContext("2d");
      var pointList = []; //ポイントを保存
      var アニメーション = null;
      var selectPoint = null;

var PointLine = function(キャンバス、x、y、r、色) {
        this.theCanvas = キャンバス;
        this.x = x;
        y = y;
        r を次のように記述します。
        this.color = color; //点の色 this.speed = 5; //点の移動速度 //移動方向 this.direction = parseInt(Math.random() * 1000) % 4; //0 -x 1 x 2-y 3 y
        this.drawPoint = 関数() {
          このCanvasのbeginPath();
          this.theCanvas.fillStyle = this.color;
          this.theCanvas.arc(this.x, this.y, this.r, 0, 360);
          キャンバスに塗りつぶしを追加します。
        };
        // 範囲外かどうかをチェックし、範囲外の場合は反対方向に変更します this.checkX = function(x) {
          (x - this.r <= 0)の場合{
            this.x = this.r;
            this.direction = 1;
          } そうでない場合 (x + this.r >= this.theCanvas.canvas.width) {
            this.x = this.theCanvas.canvas.width - this.r;
            this.direction = 0;
          } それ以外の場合は this.x = x;
        };
        this.checkY = 関数(y) {
          （y - this.r <= 0）の場合{
            this.y = this.r;
            this.direction = 3;
          } そうでない場合 (y + this.r >= this.theCanvas.canvas.height) {
            this.y = this.theCanvas.canvas.height - this.r;
            this.direction = 2;
          } それ以外の場合は this.y = y;
        };
        //ポイントを移動する this.movePoints = function() {
          （this.direction == 0）の場合{
            this.checkX(this.x - parseInt(Math.random() * this.speed));
          } それ以外の場合 (this.direction == 1) {
            this.checkX(this.x + parseInt(Math.random() * this.speed));
          } それ以外の場合 (this.direction == 2) {
            this.checkY(this.y - parseInt(Math.random() * this.speed));
          } それ以外の場合 (this.direction == 3) {
            this.checkY(this.y + parseInt(Math.random() * this.speed));
          }
        };
        これを返します。
      };

//2つの点を結ぶ function drawLine(start, end) {
        theCanvas.strokeStyle = "rgba(204,204,204,0.5)";
        キャンバスのパスの開始位置を指定します。
        theCanvas.moveTo(開始位置.x、開始位置.y);
        キャンバスの端から端までの線の長さを x で割った値。
        キャンバスのストローク();
      }
      //2点間の距離 function getDistance(p1, p2) {
        Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2) を返します。
      }
      var minDistance = parseInt(0.1 * theCanvas.canvas.height);
      minDistance = minDistance * minDistance; // 線の最短距離 // 点は別の点に接続されています function drawLinkLine(p1) {
        (var j = 0; j < pointList.length; j++) の場合 {
          var p2 = pointList[j];
          (p2.x == p1.x && p2.y == p1.y) の場合、継続します。

          var 行 = getDistance(p1, p2);
          （線が最小距離< && 線> 0）の場合{
            線を描画します(p1, p2);
          }
        }
      }

//ランダムな色を生成する function randColor() {
        戻る （
          "rgb(" +
          [
            Math.floor(Math.random() * 255)、
            Math.floor(Math.random() * 255)、
            Math.floor(Math.random() * 255)
          ].join(",") +
          「)」
        );
      }
//ランダムなポイントを生成する function createPoint() {
        var x = parseInt(Math.random() * theCanvas.canvas.width);
        var y = parseInt(Math.random() * theCanvas.canvas.height);
        var r = 5 + parseInt(Math.random() * 20);
        (x - r < 0) の場合 x = r;
        そうでない場合 (x + r > theCanvas.canvas.width) x = theCanvas.canvas.width - r;

        (y - r < 0) の場合 x = r;
        そうでない場合 (y + r > theCanvas.canvas.height)
          y = theCanvas.canvas.height - r;
        新しい PointLine(theCanvas, x, y, r, randColor()) を返します。
      }
      // 100個のランダムポイントを生成する for (var i = 0; i < 100; i++) {
        pointList.push(createPoint());
      }

// アニメーションを有効にする関数 canvasAnimation() {
        戻る （
          ウィンドウのアニメーションフレームをリクエストします。
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          ウィンドウ.msRequestAnimationFrame ||
          関数(コールバック、要素) {
            var self = this、
              始める、
              仕上げる;
            ウィンドウ.setTimeout(関数() {
              開始 = +新しい日付();
              コールバック(開始);
              終了 = +新しい日付();
              self.timeout = 1000 / 60 - (終了 - 開始);
            }, 自己タイムアウト);
          }
        );
      }
      //アニメーションをキャンセルする関数 canvasCancleAnim() {
        戻る （
          ウィンドウをキャンセル
          window.webkit アニメーションフレームをキャンセルします ||
          window.mozCancelAnimationFrame ||
          window.mosCancelAnimationFrame ||
          ウィンドウクリアタイムアウト
        );
      }

//キャンバスアニメーション関数のループ実行 start() {
        アニメーションをキャンバスから開始します。
        // キャンバスをクリアする
        キャンバスをクリアする(
          0,
          0,
          キャンバスの幅、
          キャンバスの高さ
        );
        //点と線を描画します for (var i = 0; i < this.pointList.length; i++) {
          var p = pointList[i];
          リンクラインを描画します(p);
          p.drawPoint();
          selectPoint && selectPoint == p の場合、続行します。
          p.movePoints();
        }
      }

      //アニメーションを開始します。start();

// px座標をキャンバス座標に変換する function windowToCanvas(canvas, x, y) {
        bbox を canvas.getBoundingClientRect() に追加します。
        戻る {
          x: x - bbox.left * (canvas.width / bbox.width),
          y: y - bbox.top * (canvas.height / bbox.height)
        };
      }
      //アクションを設定し、選択したポイントを押します theCanvas.canvas.onmousedown = function(e) {
       
        var loc = windowToCanvas(theCanvas.canvas, e.clientX, e.clientY);      
        (var i = 0; i < pointList.length; i++) の場合 {
          var p = pointList[i];
         
          (getDistance(p, loc)<100)の場合{
            選択ポイント = p;
            壊す;
          }
        }
      };
      //ポイントを移動する theCanvas.canvas.onmousemove = function(e) {
        if (選択ポイント) {
          var loc = windowToCanvas(theCanvas.canvas, e.clientX, e.clientY);
          選択ポイントx = loc.x;
          選択ポイントのy座標をloc.y座標に変更します。
         
        }
      };
      //ポイントの選択を解除 theCanvas.canvas.onmouseup = function(e) {
        選択ポイント = null;
       
      };