So zeichnen Sie komplexe Grafiken mit JavaScript

JavaScript ist eine sehr leistungsfähige Programmiersprache, die in der modernen Webentwicklung eine wichtige Rolle spielt. Zusätzlich zur Realisierung von Webseiteninteraktionen und dynamischen Effekten kann JavaScript über die Zeichen-API auch verschiedene komplexe Grafiken realisieren. In diesem Artikel erfahren Sie, wie Sie komplexe Grafiken mit JavaScript zeichnen.

Canvas und Kontext

Um Grafiken in Javascript zu implementieren, müssen wir zunächst ein Canvas-Element (Canvas) erstellen und dann dessen Kontext (Context) abrufen. Canvas ist ein HTML5-Tag, mit dem Sie auf einer Webseite einen rechteckigen Bereich mit Zeichenfunktionen erstellen können. Der Zweck des Abrufens des Kontexts besteht darin, die von Canvas bereitgestellte Zeichen-API zu verwenden.

Das Erstellen eines Canvas-Elements ist sehr einfach. Fügen Sie einfach den folgenden Code zu HTML hinzu:

<canvas id="myCanvas">
  Your browser does not support this feature.
</canvas>

Das id-Attribut kann verwendet werden, um das Canvas-Element abzurufen, und der in der Mitte des Tags verschachtelte Text wird in Browsern angezeigt, die dies nicht tun Unterstützt Canvas-Alt-Text. Als Nächstes können wir JavaScript verwenden, um das Canvas-Element und den Kontext abzurufen. Der Code lautet wie folgt:

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

Hier verwenden wir die getElementById-Methode des Dokumentobjekts, um das Canvas-Element mit der ID myCanvas abzurufen, und erhalten den 2D-Kontext über die getContext-Methode. Canvas unterstützt drei Kontexttypen: 2D, WebGL und WebGL2. In diesem Artikel verwenden wir den 2D-Kontext.

Grundformen zeichnen

Nachdem wir den 2D-Kontext erhalten haben, können wir mit dem Zeichnen beginnen. Die Canvas-API bietet eine Reihe von Methoden zur Beschreibung grundlegender Formen. Häufig verwendete Methoden sind: Rechteck, Bogen, Linie usw.

Zum Beispiel können wir mit dem folgenden Code ein Rechteck zeichnen:

ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 50, 50);

Im obigen Code wird die Eigenschaft fillStyle zum Festlegen der Füllfarbe und die Methode fillRect zum Zeichnen des Rechtecks ​​verwendet. Die Parameter der fillRect-Methode sind die Koordinaten der oberen linken Ecke des Rechtecks ​​(x, y) sowie die Breite und Höhe des Rechtecks ​​(width, height).

Als nächstes können wir einen Kreis durch den folgenden Code zeichnen:

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#FFFF00";
ctx.fill();

Im obigen Code verwenden Sie die beginPath-Methode, um mit dem Zeichnen eines kreisförmigen Pfads zu beginnen. Die Parameter sind die Mittelpunktskoordinaten (x, y), Radius (r), Startwinkel (startAngle) und Endwinkel (endAngle). Da wir einen vollständigen Kreis zeichnen wollen, beträgt der Startwinkel 0 und der Endwinkel 2π. Stellen Sie abschließend die Füllfarbe auf Gelb ein und verwenden Sie die Füllmethode, um den Pfad zu füllen.

Komplexe Formen zeichnen

Zusätzlich zu Grundformen können wir mit der Canvas-API auch verschiedene komplexe Formen zeichnen. Dies erfordert die Verwendung von Path2D-Objekten und Bezier-Kurven.

Path2D-Objekt ist eine Datenstruktur, die Pfade speichert, die durch dieses Objekt beschrieben werden können. Der folgende Code zeichnet beispielsweise einen Pfad, der aus drei Liniensegmenten besteht:

let path = new Path2D();
path.moveTo(0, 0);
path.lineTo(0, 50);
path.lineTo(50, 50);
ctx.stroke(path);

Im obigen Code verwenden Sie die moveTo-Methode, um den Startpunkt des Pfads auf (0,0) festzulegen, und verwenden Sie die lineTo-Methode, um drei Linien zu zeichnen Segmente nacheinander und verwenden Sie schließlich die Stroke-Methode, um einen Pfad zu zeichnen.

Die Bézier-Kurve ist eine mathematische Funktion zur Beschreibung glatter Kurven. Die Canvas-API bietet zwei Methoden, quadraticCurveTo und bezierCurveTo, zum Zeichnen quadratischer und kubischer Bezier-Kurven.

Zum Beispiel zeichnet der folgende Code einen kubischen Bezier-Kurvenpfad, der aus 3 Punkten besteht:

let path = new Path2D();
path.moveTo(20, 20);
path.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke(path);

Im obigen Code verwenden Sie die moveTo-Methode, um den Startpunkt des Pfads auf (20,20) festzulegen, und die bezierCurveTo-Methode folgt unmittelbar dahinter Drei Parametersätze, jeweils 2 Kontrollpunkte und 1 Endpunkt. Gemäß der Definition der kubischen Bezier-Kurve liegen der Startpunkt und der Endpunkt auf der Kurve, und die Kontrollpunkte beeinflussen die Krümmung der Kurve.

Zeichnen Sie Farbverläufe und Bilder

Zusätzlich zu Formen unterstützt die Canvas-API auch das Zeichnen von Farbverläufen und Bildern. Schauen Sie sich zunächst an, wie Farbverläufe gezeichnet werden.

Verlauf kann als Füllfarbe oder Strichfarbe verwendet werden. Die Canvas-API unterstützt lineare Farbverläufe und radiale Farbverläufe. Im Folgenden finden Sie den Code zur Verwendung eines linearen Farbverlaufs zum Füllen eines Rechtecks:

let gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#00FF00');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

Im obigen Code wird die Methode createLinearGradient zum Erstellen eines linearen Farbverlaufs verwendet. Die Parameter sind die Startpunktkoordinaten (x0, y0) und das Ende Punktkoordinaten (x1, y1). Die Methode addColorStop wird verwendet, um die Position und den Wert der Verlaufsfarbe festzulegen, wobei der Positionsparameter ein Wert zwischen 0 und 1 ist.

Als nächstes werfen wir einen Blick auf das Zeichnen von Bildern.

Canvas API unterstützt die Verwendung von Bildern als Leinwand, wodurch komplexere Effekte erzielt werden können. Das Folgende ist der Code zum Füllen eines Rechtecks ​​mit einem Bild:

let img = new Image();
img.onload = function(){
  let pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = 'image.png';

Im obigen Code erstellen wir zunächst ein Bildobjekt und legen das Onload-Ereignis dafür fest. Nachdem das Bild geladen wurde, verwenden wir die Methode createPattern, um das Muster zu erstellen. Die Parameter sind das Bildobjekt und die Zeichenmethode („Wiederholen“ bedeutet Kachelerweiterung). Verwenden Sie abschließend die Methode fillRect, um das Muster zu füllen.

Zusammenfassung

Durch die Einführung in die Canvas-API können wir erfahren, dass JavaScript zum Zeichnen verschiedener komplexer Grafiken verwendet werden kann. Zusätzlich zu Grundformen können verschiedene komplexe Pfade durch Path2D-Objekte und Bezier-Kurven beschrieben werden. Durch Farbverläufe und Bildzeichnung können wir auch reichhaltigere Effekte erzielen. Dies ist natürlich nur eine kurze Einführung. Die Canvas-API ist reich an Funktionen und verfügt über viele weitere fortgeschrittene Anwendungsmethoden, die wir weiter lernen und üben müssen.

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie komplexe Grafiken mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!