HTML5 -Leinwand -Zeichnungs -Tutorial (4) - Unbekannte Pfade und Gradientenfarbenfüllmethoden

Es gibt zwei allgemeine Zeichenmethoden, nämlich Füllen und Schlaganfall. Der vorherige Artikel hat bereits über Schlaganfallmethoden gesprochen. In diesem Artikel wird über die Methode zum Füllen von Grafiken in Leinwand gesprochen.

Fill () ist sehr einfach? Und genau wie Strokestyle den Schlagstil darstellt, repräsentiert Fillstyle den Füllstil.

ctx.FillStyle = 'color'; Der Standard -Füllstil ist undurchsichtig schwarz

Dürfen. Leinwand verbinden sich direkt vom Endpunkt Ihres aktuellen Pfades mit dem Startpunkt und füllen Sie ihn dann aus. Wie im Bild gezeigt:

Aber Sie können feststellen, dass der letzte Absatz keine Schlaganfälle hat.

Ich erinnere mich, dass wir in unserem vorherigen Artikel ein Quadrat mit 4 Zeilen gezogen haben, aber Leinwand ist nicht so schlimm, und es gibt nicht einmal eine Funktion, um ein Rechteck direkt zu zeichnen. Sie können Fillrect () direkt in ein Rechteck füllen:

Ctx.FillRect (x, y, width, Höhe);

Hier beziehen sich X und Y auf die Koordinaten des Startpunkts der oberen linken Ecke des Rechtecks, denken Sie daran.

Apropos Fillrect, wir müssen Strokerect erwähnen. Sie haben es richtig erraten, es bedeutet, ein Rechteck direkt zu streicheln.

Es gibt auch Stroketext. Was die Funktion betrifft, haben Sie es vielleicht erraten. Ich werde hier nicht darüber sprechen, also wird jeder es zuerst vorschauen.

In Leinwand werden Gradientenfarben auch in zwei Arten unterteilt, nämlich linearer Gradienten und radialer Gradienten, und die Methode, sie zu erstellen, ist ebenfalls unabhängig. Schauen wir uns zunächst an, wie Sie lineare Gradienten erstellen.

Erstellen Sie linearer Gradient = createLineargradient - Look, immer noch sehr direkte Wörter. Seine Syntax ist wie folgt:

Createlineargradient (x1, y1, x2, y2) hat 4 Parameter! Es sieht so kompliziert aus, aber in der Tat ist dies recht einfach, weil wir bereits gesagt haben, dass ein Punkt in einer Flugzeugwelt durch die X-Koordinate und die Y-Koordinate bestimmt wird. Daher repräsentiert x1, y1 die Ausgangspunktkoordinaten eines linearen Gradienten, und x2, Y2 repräsentiert die Endpunktkoordinaten.

Die Vorteile dessen sind offensichtlich und es ist bequem, wenn wir einen schrägen linearen Gradienten schaffen möchten. Aber versuchen wir zuerst einen horizontalen linearen Gradienten zu erstellen.

var linear = ctx.createlineargradient (100.100.200.100); Gradient scheint erstellt zu werden, können wir es füllen? -Dieser Gradient ist leer und hat keine Farbe.

Die Methode, um der Gradientenstange Farbe hinzuzufügen, ist addColorStop (Position, Farbe). Beachten Sie jedoch, dass dieser AddColorStop nicht zum Pinsel hinzugefügt wird, sondern der Variablen, die den Gradienten vorne spart. Ich bin hier linear.

var linear = ctx.createlineargradient (100.100.200.100);

linear.addcolorstop (0, '#fff');

linear.addcolorstop (0,5, '#f0f');

linear.addcolorstop (1, '#333');

Ich habe hier 3 AddColorStops verwendet, was bedeutet, dass 3 Farben in die Gradientenstange hinzugefügt werden.

Zu diesem Zeitpunkt können wir die Gradientenfarbe ausfüllen, aber wir müssen den definierten Gradienten zuerst Fillstyle zuweisen.

var linear = ctx.createlineargradient (100.100.200.100);

linear.addcolorstop (0, '#fff');

linear.addcolorstop (0,5, '#f0f');

linear.addcolorstop (1, '#333');

ctx.FillStyle = linear; // Gradient zum Füllen des Stils zuweisen

CTX.FillRect (100.100.100.100);

ctx.stroke ();

Beachten Sie, dass FillRect und Strokerect unabhängige Pfade zeichnen. Zum Beispiel wird im obigen Code der Schlaganfall nach FillRect aufgerufen, und das gerade gezogene Rechteck wird nicht gestreichelt. Gleiches gilt für Strokerect.

Nach dem Testen fand ich ein sehr schmerzhaftes Problem, dh die Koordinaten der linearen Gradienten sind relativ zum gesamten Leinwandbereich. Zum Beispiel beginnt mein linearer Gradient bei 100.100. Wenn ich ein Rechteck bei 0,0 zeichne und es mit diesem Gradienten fülle, werde ich feststellen, dass es keine Füllung gibt - da der Bereich meines Gradienten einfach den Bereich des Rechtecks ​​überschreitet.

Dies ist wirklich eine Betrugseinstellung.

treffen. Die Farbe vor dem Startpunkt ist die Ausgangspunktfarbe, und die Farbe nach dem Endpunkt ist immer die Endpunktfarbe.

Wie Sie die Endpunktfarbe beenden, können Sie nach der Endfarbe eine transparente Endfarbe ausfüllen. wie:

linear.addcolorstop (0,99, '#333');

linear.addcolorstop (1, 'rgba (51,51,51,0)');

Laut dem vorherigen Plan werde ich versuchen, einen weiteren geneigten linearen Gradienten zu bauen. Ändern Sie einfach die Parameter von Createlineargradient.

var linear = ctx.createlineargradient (100.100.200.200);

Der Effekt wird im Bild gezeigt:

Versuchen wir dann radiale Gradienten (kreisförmige Gradienten). Ähnlich wie bei CreateLineargradient ist die Methode zur Erstellung von Radialgradienten: Createuradial Graxhient, aber ihre Parameter können sehr unterschiedlich sein:

Creatreadialgradient (X1, Y1, R1, X2, Y2, R2), in dem X1, Y1, X2, Y2 immer noch den Startpunkt und den Endpunkt darstellt, aber der Ausgangspunkt und der Endpunkt hier sind sowohl ein Kreis als auch x, y sind die Koordinaten des Zentrums des Kreises. Daher sind R1 und R2 der Radius des Startpunktkreises bzw. der Radius des Endpunktkreises. Wie im Bild gezeigt:

In meinem Eindruck scheint es, dass der radiale Gradient ein Kreis ist, die Mitte des Kreises der Ausgangspunkt und der Radius des Kreises der Endpunkt. Aber der radiale Gradient in Leinwand ist tatsächlich anders. Der Ausgangspunkt ist ein Kreis und der Endpunkt ist ein Kreis, der sich von meinem Verständnis unterscheidet.

Beginnen wir mit dem einfachsten. Erstens einen sehr regelmäßigen radialen Gradienten, dh die Mitte des Gradientenkreises ist der Ausgangspunkt des Gradienten. Aufgrund des regulären radialen Gradienten ist das Zentrum die Mitte des Kreises, wir sollten versuchen, Schräge zu vermeiden. Lassen Sie uns also die Mitte des Endkreises mit der Mitte des Startkreises überlappen?

var radial = ctx.creeateradialgradient (55,55,10,55,55,55); // entsprechende Mittelkoordinaten

radial.addcolorstop (0, '#fff');

radial.addcolorstop (0,5, '#ff0');

radial.addcolorstop (0,9, '#555');

radial.addcolorstop (1, '#f00');

Der radiale Gradienten -Startpunktkreis und der Endkreis -Zentrum -Koordinaten, das ich hier eingestellt habe, sind gleich, während der Radius des Startpunktkreises 10 beträgt und der Radius des Endpunktkreises 55 beträgt. Der letzte radiale Gradientenbereich ist ein Kreis mit einer Breite und Höhe von 110, was auf dem Bereich des Endpunktkreises basiert.

(Sie können sehen, dass es außerhalb des Endkreises immer noch Farbe gibt, und diese Farbe ist die Endfarbe. Wenn Sie jedoch versuchen, radial.addcolorstop (1,5, '#0f0') zu verwenden; Um Farben außerhalb des Gradientenbereichs zu definieren, erhalten Sie immer noch einen Fehler.)

Wie nutzt der Radius des Ausgangspunktkreises? - Die Mitte des normalen radialen Gradienten (nennen wir es die Veränderung des Herzens ...) ist nur ein Punkt, kein Kreis. Eigentlich haben wir Recht. Dieser Ausgangspunktkreis ist wie ein Punkt, aber er kann relativ groß sein.

Lassen Sie uns den Radius des Startkreises sehr groß, nahe am Radius des Endkreises:

var radial = ctx.creeveradialgradient (55,55,50,55,55,55); // sehr nah

Die anderen ColorStops bleiben unverändert und dann werden die Grafiken wie diese.

Mit anderen Worten, die Startfarbe des radialen Gradienten in Leinwand wird außerhalb des Reichweite des Startkreises gezogen, und die gesamte Farbe des Startkreises ist die Startfarbe.

Setzen wir den Radius des Startpunktkreises auf 0, und die Änderung des radialen Gradientenzentrums ist wirklich ein Punkt.

Meistens brauchen wir keinen sehr formalen radialen Gradienten, sondern hoffen, dass die Veränderung des Herzens ausgeglichen ist, ähnlich der folgenden Abbildung:

Zu diesem Zeitpunkt erscheint der Vorteil der beiden Kreise des Radialgradienten von Leinwand. Solange sich die Mitte des Startpunktkreises und der Endpunktkreis nicht überlappt, verschiebt sich auch die Herzänderung:

var radial = ctx.creeateradialgradient (75,75,0,55,55,55); Aber der Gradientenbereich zu dieser Zeit ist immer noch der Bereich des Endkreises.

Viele Menschen werden mit einer Mentalität der Zerstörung geboren. Zum Beispiel ist hier der Radius des Endkreises immer größer als der Startkreis, aber was passiert, wenn sie umgekehrt sind?

var radial = ctx.creeateradialgradient (75,75,55,55,55,0);

Nach dem Testen wird es keine Fehler geben, aber der ursprüngliche Gradient von innen nach außen hat sich von außen nach innen zu einem Gradienten verwandelt. Dies ist eine gute Möglichkeit, es zu verwenden.

Es gibt ein anderes Problem. Wenn wir die Mitte des Startkreises verschieben und der Bereich des Startkreises den Bereich des Endkreises überschreitet, überschreitet

Was passiert zu diesem Zeitpunkt?

Ah! ? Wie ist die Situation? !

Diese Situation tritt auf, wenn sich der Startkreis und der Endkreis nur teilweise überlappen. Wenn Sie also normale Radialgradienten benötigen, stellen Sie sicher, dass einer der Kreise den anderen vollständig einschließt.

Da der Gradient dem Fillstyle zugeordnet werden kann, kann er auch Strokestyle zugewiesen werden. Sie kennen den Effekt.