Basierend auf HTML5 Canvas: Detaillierte Erklärung von Zeichenfolgen, Pfaden, Hintergründen und Bildern_HTML5-Tutorial-Fähigkeiten

-Tag selbst verfügt nicht über die Möglichkeit, Bilder zu zeichnen. Es bietet nur einen Bereich für JavaScript zum Zeichnen von Bildern, daher muss die Zeichenarbeit in JavaScript abgeschlossen werden. Im Folgenden sind die Vorbereitungsarbeiten aufgeführt, die vor dem Zeichnen erforderlich sind:

Das erhaltene Kontextobjekt ist ein integriertes Objekt von HTML5, das viele Methoden zum Zeichnen und Anpassen von Grafiken enthält. Durch die Bedienung in JavaScript können Sie die erforderlichen Grafiken auf der Canvas-Leinwand zeichnen.

Zeichenfolge

Verwenden Sie die fillText()-Methode des Context-Objekts, um eine Zeichenfolge im Canvas zu zeichnen. Der Prototyp der fillText()-Methode lautet wie folgt:

void fillText(text, left,top, [maxWidth]);

Die Bedeutung seiner vier Parameter ist: die zu zeichnende Zeichenfolge, die Abszisse und Ordinate der oberen linken Ecke der Leinwand beim Zeichnen in die Leinwand und die maximale Länge der gezeichneten Zeichenfolge. Die maximale Länge maxWidth ist ein optionaler Parameter.

Darüber hinaus können Sie die Schriftart und -größe der Zeichenfolge anpassen, indem Sie das Schriftartattribut des Kontextobjekts ändern. Der Standardwert ist „10px sans-serif“.

Das folgende Beispiel zeigt die Zeichenfolge „Hallo Leinwand!“ in der Leinwand an (die obere linke Ecke der Zeichenfolge befindet sich in der Mitte der Leinwand)

Pfad

Die grundlegenden Grafiken von HTML5 Canvas basieren auf Pfaden. Normalerweise werden die Methoden moveTo(), lineTo(), rect(), arc() und andere Methoden des Context-Objekts verwendet, um zuerst die Pfadpunkte der Grafik auf der Leinwand zu verfolgen, und dann die Methoden fill() oder Stroke() wird verwendet, um die Grafik zu füllen oder entsprechend den Pfadpunkten zu zeichnen.

Normalerweise müssen Sie die beginPath()-Methode des Context-Objekts aufrufen, bevor Sie mit dem Zeichnen eines Pfads beginnen. Ihre Funktion besteht darin, den vorherigen Pfad zu löschen und den Kontext daran zu erinnern, mit dem Zeichnen eines neuen Pfads zu beginnen. )-Methode aufgerufen wird, werden alle vorherigen Pfade gezeichnet. Der Pfad wirkt sich auf den Zeicheneffekt aus und wirkt sich auch auf die Leistung der Webseite aufgrund wiederholter Vorgänge aus. Darüber hinaus kann durch Aufrufen der Methode closePath () des Kontextobjekts der aktuelle Pfad explizit geschlossen werden, der Pfad wird jedoch nicht gelöscht.

Hier sind Prototypen für einige Methoden zum Zeichnen von Pfaden:

void moveTo(x, y);

wird verwendet, um den Startpunkt des Pfads explizit anzugeben. Standardmäßig ist der Startpunkt des ersten Pfads der (0, 0)-Punkt der Leinwand, und die nachfolgenden Startpunkte sind die Endpunkte des vorherigen Pfads. Die beiden Parameter sind in x- und y-Koordinatenwerte unterteilt, die den Startpunkt darstellen.

void lineTo(x, y);

wird verwendet, um einen geraden Pfad vom Startpunkt zur angegebenen Position zu zeichnen. Nach Abschluss der Zeichnung wird der gezeichnete Startpunkt zur angegebenen Position verschoben. Die Parameter stellen die x- und y-Koordinatenwerte des angegebenen Standorts dar.

void rect(left, top,width, height);

wird verwendet, um ein Rechteck mit einer bekannten oberen linken Scheitelpunktposition, Breite und Höhe zu zeichnen. Nachdem die Zeichnung abgeschlossen ist, wird der Zeichenstartpunkt des Kontexts an den oberen linken Scheitelpunkt des Rechtecks ​​verschoben. Die Parameter repräsentieren die x- und y-Koordinaten der oberen linken Ecke des Rechtecks ​​sowie die Breite und Höhe des Rechtecks.

void arcTo(x1, y1, x2, y2,radius);

wird verwendet, um einen Bogen zu zeichnen, der zwei Liniensegmente tangiert. Die beiden Liniensegmente nehmen den aktuellen Startpunkt der Kontextzeichnung und den (x2, y2)-Punkt als Startpunkt an und enden beide am (x1, y1). ) Punkt. Der Radius des Bogens ist Radius. Nachdem die Zeichnung abgeschlossen ist, wird der Zeichnungsstartpunkt ausgehend von (x2, y2) zum Tangentenpunkt zwischen dem Liniensegment und dem Bogen verschoben.

Leerbogen(x, y, radius,startAngle, endAngle, gegen den Uhrzeigersinn);

wird verwendet, um einen Bogen mit dem (x, y)-Punkt als Mittelpunkt, radius als Radius, startAngle als Start-Bogenmaß und endAngle als End-Bogenmaß zu zeichnen. gegen den Uhrzeigersinn ist ein boolescher Parameter, true bedeutet gegen den Uhrzeigersinn, false bedeutet im Uhrzeigersinn. Die beiden Bogenmaße in den Parametern werden durch 0° dargestellt und die Position liegt bei 3 Uhr; der Math.PI-Wert stellt 180° dar und die Position liegt bei 9 Uhr.

void quadraticCurveTo(cpx,cpy, x, y);

wird verwendet, um einen quadratischen Spline-Pfad mit dem aktuellen Startpunkt der Kontextzeichnung als Startpunkt, dem (cpx, cpy)-Punkt als Kontrollpunkt und dem (x, y)-Punkt als Endpunkt zu zeichnen.

void bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y);

wird verwendet, um einen Bezier-Kurvenpfad mit dem aktuellen Startpunkt der Kontextzeichnung als Startpunkt, (cpx1, cpy1)-Punkt und (cpx2, cpy2)-Punkt als zwei Kontrollpunkten und (x, y)-Punkt als zu zeichnen der Endpunkt.

Nachdem das Zeichnen des Pfads abgeschlossen ist, müssen Sie die Methoden fill() und Stroke() des Context-Objekts aufrufen, um den Pfad zu füllen und Pfadlinien zu zeichnen, oder die Methode clip() aufrufen, um den Canvas-Bereich auszuschneiden. Die Prototypen der oben genannten drei Methoden lauten wie folgt:

Void Stroke();

Wird zum Zeichnen von Linien entsprechend vorhandener Pfade verwendet.

void fill();

Wird verwendet, um den Bereich des Pfads mit dem aktuellen Füllstil zu füllen.

void clip();

Wird verwendet, um den Beschneidungsbereich im Canvas entsprechend der vorhandenen Route festzulegen. Nach dem Aufruf der Methode „clip()“ ist der Grafikzeichnungscode nur im Beschneidungsbereich wirksam und hat keinen Einfluss mehr auf die Leinwand außerhalb des Bereichs. Wenn der Pfad nicht vor dem Aufruf gezeichnet wird (d. h. im Standardzustand), ist der resultierende Beschneidungsbereich der gesamte Canvas-Bereich.

Darüber hinaus stellt das Context-Objekt auch entsprechende Eigenschaften zum Anpassen der Linien- und Füllstile bereit, wie unten gezeigt:

StrokeStyle

Die Farbe der Linie ist standardmäßig „#000000“. Der Wert kann auf einen CSS-Farbwert, ein Verlaufsobjekt oder ein Musterobjekt festgelegt werden.

fillStyle

Die Füllfarbe ist standardmäßig „#000000“. Wie bei „StrokeStyle“ kann der Wert auch auf einen CSS-Farbwert, ein Verlaufsobjekt oder ein Musterobjekt festgelegt werden.

Linienbreite

Die Breite der Linie, die Einheit ist Pixel (px), der Standardwert ist 1,0.

lineCap

Für den Endpunktstil der Linie stehen drei Typen zur Auswahl: „Stoß“ (kein), „Rund“ (runder Kopf) und „Quadrat“ (quadratischer Kopf).

lineJoin

Es gibt drei Arten von Wendepunkten für Linien: rund (abgerundete Ecken), abgeschrägt (flache Ecken) und Gehrung (scharfe Ecken); der Typ steht zur Auswahl, und die Standardeinstellung ist Gehrung.

miterLimit

Ein scharfes Programm zum Falten scharfer Ecken von Linien, der Standardwert ist 10.

Das folgende Beispiel ruft einige der oben genannten Methoden und Eigenschaften auf, um Grafiken zu zeichnen:

Leinwandhintergrund

Im obigen Beispiel wird die Methode fillRect() aufgerufen. Tatsächlich verfügt das Kontextobjekt über drei Methoden, mit denen Grafiken ohne Pfad direkt auf die Leinwand gezeichnet werden können. Dies kann als direktes Zeichnen auf dem Leinwandhintergrund betrachtet werden. Die Prototypen dieser drei Methoden lauten wie folgt:

void fillRect(left, top,width, height);

Wird verwendet, um ein Rechteck mit dem Scheitelpunkt der oberen linken Ecke am (linken, oberen) Punkt zu füllen, Breite als Breite und Höhe als Höhe unter Verwendung des aktuellen FillStyle-Stils (Standard ist „#000000“, schwarz).

void StrokeRect(left, top,width, height);

wird verwendet, um einen rechteckigen Rahmen mit dem Scheitelpunkt der oberen linken Ecke am (linken, oberen) Punkt zu zeichnen, Breite als Breite und Höhe als Höhe unter Verwendung des aktuellen Linienstils.

void clearRect(left, top,width, height);

Wird verwendet, um den gesamten Inhalt innerhalb des rechteckigen Bereichs zu löschen, wobei der obere linke Scheitelpunkt am (linken, oberen) Punkt liegt, Breite als Breite und Höhe als Höhe.

Bilder

Das Kontextobjekt verfügt über die Methode drawImage(), um externe Bilder in Canvas zu zeichnen. Die drei Prototypen der Methode drawImage() lauten wie folgt:

drawImage(image, dx, dy);

drawImage(image, dx, dy,dw, dh);

drawImage(image, sx, sy,sw, sh, dx, dy, dw, dh);

Die folgende Abbildung zeigt die Bedeutung jedes Parameters im Prototyp:

Unter diesen kann der Bildparameter HTMLImageElement, HTMLCanvasElement oder HTMLVideoElement sein. sx und sy im dritten Methodenprototyp sind in den ersten beiden beide 0, und sw und sh sind sowohl die Breite als auch die Höhe des Bildes selbst, dw und dh im zweiten und dritten Prototyp sind auch beide im ersten. sind die Breite und Höhe des Bildes selbst.

Das folgende Beispiel zeichnet ein Remote-Bild in die Leinwand: