Wie man zeichnet, wenn sich der Bildlauf bewegt

Lernen Sie, wie Sie mit JavaScript und SVG zeichnen, wenn sich der Bildlauf bewegt.

Try it yourself

Bewegungszeichnung

Mit SVG und JavaScript zeichnen, wenn sich der Bildlauf bewegt - bitte beachten Sie, dass es <path> Element:}}

Beispiel

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Das <path>-Element mit der ID "triangle" erhalten
var triangle = document.getElementById("triangle");
// Länge des <path>-Elements erhalten
var length = triangle.getTotalLength();
// Startposition der Zeichnung (Setzen des Strichmusters. Hier wird der Wert auf den Wert der Pfadlänge gesetzt, was bedeutet, dass der gesamte Pfad als ein "großes Strichmuster" betrachtet wird.)
triangle.style.strokeDasharray = length;
/* Einstellung des Strichabstandmaßstabs. Am Anfang wird der Wert auf die Länge des Pfades gesetzt, was bedeutet, dass der gesamte Pfad verschoben wird, um den Dreiecksbildschirm zu verbergen.
Mit dem Scrollen wird dieser Verschiebungsmaßstab allmählich kleiner, was zur allmählichen Anzeige des Dreiecks führt.
Das Entfernen dieser Zeile von Code kann die Anzeige des Dreiecks vor dem Zeichnen desScrolls ermöglichen.*/
triangle.style.strokeDashoffset = length;
// Überwachen des Scroll-Ereignisses des Fensters und Aufrufen der Funktion myFunction beim Scrollen.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Berechnung des Scroll-Prozentsatzes = (aktuelle Scrollhöhe) / (Gesamthöhe der scrollbaren Höhe)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Berechnung der zu zeichnenden Länge = Gesamtlänge * Scroll-Prozentsatz
  var draw = length * scrollpercent;
  // Wenn nach oben gescrollt wird, wird tatsächlich rückwärts gezeichnet (von vollständig zu unvollständig), daher wird hier die Gesamtlänge minus die zu zeichnende Länge verwendet.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Try it yourself

Related pages

Tutorial:SVG tutorial