<!-- <canvas id="canvas" width="1080" height="440"></canvas>

<script>
    var canvas = document.getElementById('canvas')
    var context = canvas.getContext('2d')

    var devicePixelRatio = window.devicePixelRatio || 1
    var backingStoreRatio = context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio || 1
    var ratio = devicePixelRatio / backingStoreRatio

    var oldWidth = canvas.width;
    var oldHeight = canvas.height;

    canvas.width = oldWidth * ratio;
    canvas.height = oldHeight * ratio;

    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';

    var size = 50
    context.font = '50px sans-serif';
    context.textBaseline = 'top';

    context.font = 50 * ratio + 'px sans-serif';

    context.fillText('hello world', 0, 0);

    context.font = '50px sans-serif';

    var img = new Image();
    img.onload = function () {
        context.drawImage(img, 0, 0, this.naturalWidth, this.naturalHeight, 0, 70 * ratio, this.naturalWidth, this.naturalHeight);
    };
    img.src = 'https://user-images.githubusercontent.com/10244002/59971671-27260b00-95b3-11e9-8b64-29a5febebda1.jpg'

</script>

<canvas id="canvas2" width="1080" height="440"></canvas>

<script>
    var canvas2 = document.getElementById('canvas2')
    var context2 = canvas2.getContext('2d')

    var size = 50
    context2.font = '50px sans-serif';
    context2.textBaseline = 'top';
    var ratio = 1
    context2.font = 50 * ratio + 'px sans-serif';

    context2.fillText('hello world', 0, 0);

    context2.font = '50px sans-serif';

    var img2 = new Image();
    img2.onload = function () {
        context2.drawImage(img2, 0, 0, this.naturalWidth, this.naturalHeight, 0, 70 * ratio, this.naturalWidth, this.naturalHeight);
    };
    img2.src = 'https://user-images.githubusercontent.com/10244002/59971671-27260b00-95b3-11e9-8b64-29a5febebda1.jpg'

</script> -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>最小生成树</title>
    <style>
      circle {
        fill: blueviolet;
      }

      line {
        stroke-width: 1px;
        stroke: brown;
      }
    </style>
  </head>

  <body>
    <svg id="svg" xmlns="http://www.w3.org/2000/svg"></svg>
    <script>
      var width = document.body.clientWidth;
      var height = window.innerHeight - 50;
      var svg = document.getElementById("svg");
      var dots = 100;
      var i = 0;
      var allCircle = [];
      const namespace = "http://www.w3.org/2000/svg";

      svg.setAttribute("width", width);
      svg.setAttribute("height", height);

      for (; i < dots; i++) {
        allCircle.push({
          cx: ~~(Math.random() * width),
          cy: ~~(Math.random() * height)
        });
      }

      class Graph {
        constructor(dots) {
          this.dots = dots;
          this.matrix = [];
          this.visited = [];
          this.lines = [];

          this.drawDots();
          this.adjacencyMatrix();
          this.getMinTree();
          this.drawLines();
        }
        adjacencyMatrix() {
          var dots = this.dots;
          var length = dots.length;

          for (var i = 0; i < length; i++) {
            this.matrix[i] = [];
            for (var j = 0; j < length; j++) {
              this.matrix[i][j] =
                i !== j ? this.getDistance2(dots[i], dots[j]) : 0;
            }
          }
        }
        getMinTree() {
          var dots = this.dots;
          var length = dots.length;
          var min;
          var from;
          var to;

          this.visited.push(0);
          while (this.visited.length < length) {
            min = Number.MAX_SAFE_INTEGER;

            for (var i = 0; i < this.visited.length; i++) {
              from = this.visited[i];

              for (var j = 0; j < length; j++) {
                if (this.matrix[from][j] !== 0 && this.matrix[from][j] < min && this.visited.indexOf(j) === -1) {
                  min = this.matrix[from][j];
                  to = j;
                  var realFrom = from;
                }
              }
            }

            // console.log(realFrom, to);

            this.lines.push({
              from: dots[realFrom],
              to: dots[to]
            });
            this.visited.push(to);
          }
        }
        getDistance2(p1, p2) {
          return ~~Math.sqrt((p1.cx - p2.cx) ** 2 + (p1.cy - p2.cy) ** 2);
        }
        drawDots() {
          this.dots.forEach(ele => {
            var dot = document.createElementNS(namespace, "circle");

            dot.setAttribute("cx", ele.cx);
            dot.setAttribute("cy", ele.cy);
            dot.setAttribute("r", 5);

            svg.appendChild(dot);
          });
        }
        drawLines() {
          var i = 0;
          var draw = () => {
            var line = document.createElementNS(namespace, "line");
            var _ = this.lines[i]

            line.setAttribute("x1", _.from.cx);
            line.setAttribute("y1", _.from.cy);

            line.setAttribute("x2", _.to.cx);
            line.setAttribute("y2", _.to.cy);

            svg.appendChild(line);
            i++;
            if (i < this.lines.length) {
              requestAnimationFrame(draw);
            }
          };

          draw();
        }
      }

      var g = new Graph(allCircle);
      console.log(g);
    </script>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.