JavaScript Canvas realisiert dynamische Punkt- und Linieneffekte

In diesem Artikel wird der spezifische Code für JavaScript-Canvas zur Erzielung dynamischer Punkt- und Linieneffekte zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Effektvorschau

1. Ergebnisse erzielen

Farbige Punkte zeichnen
Verbindungspunkte
Punkt-Linien-Bewegung, Begegnung mit Grenzrückprall
Wählen Sie einen Punkt aus und ziehen Sie ihn, um seine Position zu ändern*

2. Konkrete Umsetzung

Initialisieren Sie zugehörige Variablen

var c = document.getElementById("myCanvas");
      //Leinwandgröße festlegen c.height = document.body.offsetHeight;
      c.width = Dokument.Body.OffsetWidth;
      //Canvas folgt der Fenstergröße window.onresize = function() {
        c.Höhe = Dokument.Body.OffsetHeight;
        c.width = Dokument.Body.OffsetWidth;
      };

      var theCanvas = c.getContext("2d");
      var pointList = []; //Punkte speichern
      var anim = null;
      var selectPoint = null;

Erstellen Sie Objekte zum Speichern verwandter Punkt- und Liniendaten

var PointLine = Funktion(Leinwand, x, y, r, Farbe) {
        dies.dieLeinwand = Leinwand;
        dies.x = x;
        dies.y = y;
        dies.r = r;
        this.color = color; //Punktfarbe this.speed = 5; //Punktbewegungsgeschwindigkeit //Bewegungsrichtung this.direction = parseInt(Math.random() * 1000) % 4; //0 -x 1 x 2-y 3 y
        dies.drawPoint = Funktion() {
          dies.theCanvas.beginPath();
          dies.theCanvas.fillStyle = diese.farbe;
          dies.theCanvas.arc(dieses.x, dies.y, dies.r, 0, 360);
          dies.theCanvas.fill();
        };
        //Überprüfen Sie, ob es außerhalb der Grenzen liegt. Wenn ja, ändern Sie es in die entgegengesetzte Richtung. this.checkX = function(x) {
          wenn (x - this.r <= 0) {
            dies.x = dies.r;
            diese.Richtung = 1;
          } sonst wenn (x + this.r >= this.theCanvas.canvas.width) {
            dies.x = dies.dieCanvas.canvas.width - dies.r;
            diese.Richtung = 0;
          } sonst dies.x = x;
        };
        this.checkY = Funktion(y) {
          wenn (y - this.r <= 0) {
            dies.y = dies.r;
            diese.Richtung = 3;
          } sonst wenn (y + dies.r >= dies.theCanvas.canvas.height) {
            dies.y = dies.dieLeinwand.Leinwandhöhe - dies.r;
            diese.Richtung = 2;
          } sonst dies.y = y;
        };
        //Punkte verschieben this.movePoints = function() {
          wenn (diese.Richtung == 0) {
            dies.checkX(dieses.x - parseInt(Math.random() * diese.geschwindigkeit));
          } sonst wenn (diese.Richtung == 1) {
            dies.checkX(dieses.x + parseInt(Math.random() * diese.geschwindigkeit));
          } sonst wenn (diese.Richtung == 2) {
            dies.checkY(dieses.y - parseInt(Math.random() * diese.geschwindigkeit));
          } sonst wenn (diese.Richtung == 3) {
            dies.checkY(dieses.y + parseInt(Math.random() * diese.geschwindigkeit));
          }
        };
        gib dies zurück;
      };

Zeichnen Sie eine Linie zwischen zwei Punkten

//Zwei Punkte verbinden Funktion drawLine(start, end) {
        theCanvas.strokeStyle = "rgba(204,204,204,0.5)";
        theCanvas.beginPath();
        theCanvas.moveTo(start.x, start.y);
        theCanvas.lineTo(ende.x, end.y);
        theCanvas.stroke();
      }
      //Der Abstand zwischen zwei Punkten Funktion getDistance(p1, p2) {
        gibt Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2) zurück;
      }
      var minDistance = parseInt(0,1 * theCanvas.canvas.height);
      minDistance = minDistance * minDistance; //Die kürzeste Distanz einer Linie //Ein Punkt ist mit einem anderen Punkt verbunden function drawLinkLine(p1) {
        für (var j = 0; j < Punktliste.Länge; j++) {
          var p2 = Punkteliste[j];
          wenn (p2.x == p1.x und p2.y == p1.y), weiter;

          var Zeile = getDistance(p1, p2);
          if (Zeile < minDistance && Zeile > 0) {
            zeichneLinie(p1, p2);
          }
        }
      }

Zufällige Punkte generieren

//Zufällige Farben erzeugen Funktion randColor() {
        zurückkehren (
          "rgb(" +
          [
            Math.floor(Math.random() * 255),
            Math.floor(Math.random() * 255),
            Mathe.Boden(Math.Random() * 255)
          ].join(",") +
          ")"
        );
      }
//Zufällige Punkte generieren Funktion createPoint() {
        var x = parseInt(Math.random() * theCanvas.canvas.width);
        var y = parseInt(Math.random() * theCanvas.canvas.height);
        var r = 5 + parseInt(Math.random() * 20);
        wenn (x - r < 0) x = r;
        sonst wenn (x + r > theCanvas.canvas.width) x = theCanvas.canvas.width - r;

        wenn (y - r < 0) x = r;
        sonst wenn (y + r > theCanvas.canvas.height)
          y = dieLeinwand.Leinwand.Höhe - r;
        gibt eine neue PointLine (dieLeinwand, x, y, r, Randfarbe()) zurück;
      }
      //Generiere 100 zufällige Punkte für (var i = 0; i < 100; i++) {
        Punktliste.push(Punkt erstellen());
      }

Kompatibel mit Browser-Canvas-Animationsrahmen

// Animationsfunktion aktivieren canvasAnimation() {
        zurückkehren (
          Fenster.requestAnimationFrame ||
          Fenster.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          fenster.msRequestAnimationFrame ||
          Funktion(Rückruf, Element) {
            var selbst = dies,
              Start,
              beenden;
            Fenster.setTimeout(Funktion() {
              start = +neues Datum();
              Rückruf (Start);
              Ende = +neues Datum();
              self.timeout = 1000 / 60 – (Ende – Start);
            }, selbst.Zeitüberschreitung);
          }
        );
      }
      //Animation abbrechen Funktion canvasCancleAnim() {
        zurückkehren (
          Fenster.Animationsrahmen abbrechen ||
          window.webkitAnimationFrame abbrechen ||
          window.mozAnimationFrame abbrechen ||
          window.mosAnimationFrame abbrechen ||
          window.clearTimeout
        );
      }

Animation starten

//Schleifenausführung der Canvas-Animationsfunktion start() {
        anim = canvasAnimation()(diesen.start);
        // Leinwand leeren
        theCanvas.clearRect(
          0,
          0,
          dieLeinwand.Leinwand.Breite,
          theCanvas.canvas.höhe
        );
        //Punkte und Linien zeichnen für (var i = 0; i < this.pointList.length; i++) {
          var p = Punkteliste[i];
          zeichneLinkLine(p);
          p.drawPoint();
          wenn (selectPoint und selectPoint == p) fortfahren;
          p.Punkte verschieben();
        }
      }

      //Animation starten start();

Wählen Sie einen Punkt aus und ziehen Sie ihn

// px-Koordinaten zu Canvas-Koordinaten Funktion windowToCanvas(canvas, x, y) {
        var bbox = canvas.getBoundingClientRect();
        zurückkehren {
          x: x - bbox.links * (Leinwand.Breite / bbox.Breite),
          y: y - bbox.top * (Canvas.Höhe / bbox.Höhe)
        };
      }
      //Aktion festlegen, ausgewählten Punkt drücken theCanvas.canvas.onmousedown = function(e) {
       
        var loc = windowToCanvas(theCanvas.canvas, e.clientX, e.clientY);      
        für (var i = 0; i < Punktliste.Länge; i++) {
          var p = Punkteliste[i];
         
          wenn (getDistance(p, loc)<100) {
            wählePunkt = p;
            brechen;
          }
        }
      };
      //Punkt bewegen theCanvas.canvas.onmousemove = function(e) {
        wenn (Punkt auswählen) {
          var loc = windowToCanvas(theCanvas.canvas, e.clientX, e.clientY);
          wählePunkt.x = Ort.x;
          wählePunkt.y = Ort.y;
         
        }
      };
      //Auswahl des Punkts aufheben theCanvas.canvas.onmouseup = function(e) {
        Punkt auswählen = null;
       
      };

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: