Der zweite Anwendungsfall von fillStyle ist das Füllen mit Farbverläufen. Verlaufsfarben werden in lineare Verlaufsfarben und radiale Verlaufsfarben unterteilt.
Linearer Verlauf: Grob in zwei Schritte unterteilt. Hier werden zwei neue Funktionen von Canvas verwendet.
Schritt 1: Verwenden Sie eine neue Funktion createLinearGradient(xstart,ystart,xend,yend);var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend);
Es hat vier Parameter. Sie sind xstart, ystart, xend und yend, die zwei Koordinaten bilden, und diese beiden Koordinaten bilden ein Liniensegment. Dieses Liniensegment ist eigentlich eine Verlaufslinie. Verlaufslinien werden verwendet, um die Richtung und den Maßstab des Verlaufs zu definieren.
Der zweite Schritt: ColorStop basierend auf dieser Verlaufslinie hinzufügen. Diese Methode heißt addColorStop(stop, color). Es hat zwei Parameter: Stopp und Farbe. Der erste Parameter ist ein Gleitkommawert, der zur Bestimmung der Position der Schlüsselfarbe verwendet wird. Der zweite Parameter wird verwendet, um die Farbe der Schlüsselfarbe zu bestimmen. linearGrad.addColorStop(stop,color);
Nach Abschluss dieser beiden Schritte kann die Variable linearGrad als fillStyle an dieses Attribut übergeben werden.
Schauen Sie sich den Code an:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Kompatibler Inhalt=ie=edge> <title>Linearer Farbverlauf</title></head><body> <canvas id=canvas style=border: 1px solide #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas.width = 800). ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); //Holen Sie sich die Kontextzeichnungsumgebung var linearGrad = context.createLinearGradient(0, 0, 800, 600); //Die Startkoordinate der Verlaufslinie ist (0,0) und die Endkoordinate ist (800,600) linearGrad.addColorStop(0.0, '#000'); Der erste Parameter repräsentiert die Position der Schlüsselfarbe. 0 repräsentiert die Startposition, 1 repräsentiert die Endposition und der zweite Parameter repräsentiert die Farbe der Schlüsselfarbe. linearGrad.addColorStop(1.0, '#fff'); context.fillStyle = linearGrad; context.fillRect(0, 0, 800, 600); ') } </script>Darstellung:
Nachdem wir die linearGrad-Variable erstellt haben, können wir ColorStop hinzufügen und viele hinzufügen.
Zum Beispiel:
Code:
var linearGrad = context.createLinearGradient(0, 0, 800, 600); //Die Startkoordinate der Verlaufslinie ist (0,0) und die Endkoordinate ist (800,600) linearGrad.addColorStop(0.0, '#fff') ; linearGrad. addColorStop(0.25, '#FB3'); '#690'); linearGrad.addColorStop(0.75, '#09C'); linearGrad.addColorStop(1.0, '#000');
Darstellung:
Außerdem ist die von uns definierte Verlaufslinie geneigt und wir können sie auch als horizontal oder vertikal definieren. Wir müssen nur die Endkoordinaten der Verlaufslinie ändern. Schauen Sie sich den Code an, um einen horizontalen Farbverlauf zu erstellen:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
Darstellung:
Vertikale Verlaufsfarbe:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
Darstellung:
Unabhängig davon, ob es horizontal oder vertikal geneigt ist, erstreckt sich das, was wir tun, über die gesamte Leinwand. Welchen Effekt hat es also, wenn unsere Verlaufslinie nur einem Teil der Leinwand zugewiesen ist? Lassen Sie es uns ändern
var linearGrad = context.createLinearGradient(0, 0, 400, 300);
Darstellung:
Ebenso kann die von uns erstellte Verlaufslinie die maximale Breite und Höhe dieser Leinwand überschreiten. Lassen Sie es uns ändern
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);
Darstellung:
Außerdem nehmen die von uns gezeichneten gefüllten Formen möglicherweise nicht unbedingt die gesamte Leinwand ein. Wir können die von uns definierte Form beliebig anpassen. Diese gefüllte Form findet die entsprechende Füllfarbe auf der von uns definierten Verlaufslinie und füllt sie aus. Zum Beispiel:
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);
Darstellung:
Radialer Farbverlauf: Der Unterschied zum linearen Farbverlauf besteht darin, dass der radiale Farbverlauf einen radialen Farbverlauf definiert. Dieser radiale Gradient wird anhand zweier konzentrischer Kreise definiert. Im Gegensatz zu einem linearen Gradienten, der zwischen zwei Punkten definiert ist.
Radiale Farbverläufe erfordern ebenfalls zwei Schritte.
Schritt 1: Verwenden Sie eine neue Funktion createRadialGradient(x0,y0,r0,x1,y1,r1); er hat 6 Parameter. Die ersten drei Parameter definieren die Koordinaten und den Radius des ersten Rings und die letzten drei Parameter definieren die Koordinaten und den Radius des zweiten Rings. Zwischen diesen beiden Kreisen findet der gesamte radiale Gradient statt. var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Schritt 2: Es ist dasselbe wie ein linearer Farbverlauf, daher werde ich ihn nicht im Detail vorstellen. radialGrad.addColorStop(stop,color);
Der Code ist dem Code für lineare Farbverläufe sehr ähnlich. Hier wird lediglich createRadialGradient verwendet. Wir übergeben die Parameter createRadialGradient(300,300,0,300,300,500). Die ersten drei Parameter definieren einen Punkt mit einem Radius von 0 in der Mitte der Leinwand. Die letzten drei Parameter definieren einen großen Kreis mit einem Radius von 500 in der Mitte der Leinwand. Dies definiert einen radialen Gradienten, der von einem Punkt aus nach außen verläuft. Schauen Sie sich den Code an
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Kompatibler Inhalt=ie=edge> <title>Radialer Farbverlauf</title></head><body> <canvas id=canvas style=border: 1px solide #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas.width = 600). ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); context.createRadialGradient(300, 300, 0, 300, 300, 500); radialGrad.addColorStop(0.0, '#fff'); radialGrad.addColorStop(0.5, '#690 '); radialGrad.addColorStop(0.75, '#09C'); radialGrad.addColorStop(1.0, '#000'); context.fillStyle = radialGrad; context.fillRect(0, 0, 600, 600); Ihr Browser unterstützt Canvas nicht. Versuchen Sie bitte, Ihren Browser zu ändern~') } </script>Darstellung:
Sie können versuchen, die Parameter zu ändern, um zu sehen, welche unterschiedlichen Auswirkungen es gibt.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.