HTML5 Canvas-Verlauf

HTML5 Canvas-Verläufe können als Farbmuster für die Füllung oder den Strich eines Shapes verwendet werden, anstatt reinen Farben. Der Farbverlauf geht von einer Farbe zur anderen Farbe über. Der Farbverlauf hat zwei Typen: Linear (linear) und Radial (radial)

HTML5 Canvas-Verläufe können als Farbmuster für die Füllung oder den Strich eines Shapes verwendet werden, anstatt reinen Farben. Ein Farbverlauf ist ein Farbmuster, das von einer Farbe zur anderen Farbe übergeht. Hier sind einige Beispiele, um meine Bedeutung zu verdeutlichen:

Es gibt zwei Arten von Farbverläufen:

1. Linear (linear)

2. Radial (radial)

linearer Farbverlauf verwendet horizontale, vertikale oder diagonale lineare Mustermuster, um die Farben zu ändern.
radialen Farbverläufe verwenden kreisförmige Mustermuster, um die Farben von innen nach außen zu ändern.
Es werden zwei Arten von Farbverläufen in diesem Artikel vorgestellt. Die

linearer Farbverlauf

Wie bereits erwähnt, verwenden lineare Farbverläufe lineare Mustermuster, um die Farben zu ändern. Mit2D-Datenkontextfunktion zur Erstellung von linearen Farbverläufen createLinearGradient(). Hier ist ein Beispiel:

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
　　　　
var x1　=　　　0;
var y1　=　　　0;
var x2　=　100;
var y2　=　　　0;
var linearGradient1　=　context.createLinearGradient(x1,　y1,　x2,　y2);

Die Funktion createLinearGradient() nimmt4Parameter: x1, y1x2, y2Dies4。1, y1bestimmt die Richtung und den Umfang des Farbverlaufs. Der Farbverlauf beginnt am ersten Punkt x2, y2bis zum zweiten Punkt x
。1, und x2）erzeugt, wie folgt einen horizontalen Farbverlauf:

　　　　var x1　=　　　0;
　　　　var y1　=　　　0;　　　　var　x2　=　100;
　　　　var y2　=　　　0;
　　　　var linearGradient1　=　context.createLinearGradient(x1,　y1,　x2,　y2);

Durch Änderung nur des y-Achsenparameterwerts (für y1und y2）erzeugt, wie folgt eine vertikale Verlaufsrichtung:

　　　　var x1　=　　　0;　　　　var　y1　=　　　0;
　　　　var x2　=　　　0;　　　　var　y2　=　100;
　　　　var linearGradient1　=　context.createLinearGradient(x1,　y1,　x2,　y2);

Durch gleichzeitige Änderung der x- und y-Achsenparameter wird ein diagonaler Farbverlauf erstellt. Hier ist ein Beispiel:

　　　　var x1　=　　　0;
　　　　var y1　=　　　0;
　　　　var x2　=　100;
　　　　var y2　=　100;
　　　　var linearGradient1　=　context.createLinearGradient(x1,　y1,　x2,　y2);

Farbstopp

Der obige Beispiel zeigt keine Farbverlaufsfarbe. Um die Farbverlaufsfarbe zu setzen, kann die Funktion addColorStop() auf dem Farbverlaufsobjekt verwendet werden. Hier ist ein Beispiel:

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0,39;rgb(255,　0,　0)');
linearGradient1.addColorStop(1,　'rgb(　　0,　0,　0)');

Die Funktion addColorStop() hat2Parameter. Der erste Parameter liegt zwischen 0 und1zwischen den Zahlen. Diese Zahl zeigt an, wo sich dieser Farbmarker im Farbverlauf befindet. Der zweite Parameter ist die Farbe selbst. Beachten Sie, wie in diesem Beispiel die rbg(red, green, blue)-Farbkonvention verwendet wird, wobei jeder rote/grün/Der blauwert kann zwischen 0 und255zwischen den Zahlen (mit1in Bytes (jeweils ein Byte) dargestellt).
Der obige Beispiel hat zwei Farbmarken hinzugefügt. Die erste ist rot und ist auf den Anfang des Verlaufs (erster Parameterwert 0) eingestellt. Die zweite Farbe ist schwarz und ist auf das Ende des Farbverlaufs (erster Parameter) eingestellt.1）。
Sie können dem Farbverlauf mehr als zwei Farbstopp hinzufügen. Dies ist ein Beispiel mit3Beispiel für Farbstopp:

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255);
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　0)');

Dieser Beispiel fügt eine Blau in der Mitte des Farbverlaufs hinzu. Der Farbverlauf verläuft daher von Rot auf Blau und dann auf Schwarz.

Verwenden Sie Farbverläufe als Füll- oder Umrandungsstil

Sie können den Farbverlauf als Füll- oder Strichmuster verwenden. Dies2DIE fillStyle- oder strokeStyle-Eigenschaft des Kontexts auf das Farbverlaufsobjekt zu setzen, um dies zu erreichen. Dies ist ein Beispiel:

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255);
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　0)');
context.fillStyle = linearGradient1;
context.strokeStyle = linearGradient1;

Jetzt können Sie Farbverläufe als Füll- oder Umrandungsfarbe zeichnen. Dies ist ein Beispiel, um-einer gefüllt und einer umrandet (überschrieben):

<canvas id="ex2" width="500" height="125" style="border:　1px fest gestrichen #cccccc;">
　　　　HTML5　Canvas wird nicht unterstützt
</canvas>
<script>
var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
var linearGradient1　= context.createLinearGradient(0,0,100,0);　//horizontal gradient
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　　　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255)');
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　　　0)');
context.fillStyle = linearGradient1;
context.fillRect(10,10,100,　100);
var linearGradient2　= context.createLinearGradient(125,0,　225,0);　//horizontal gradient
linearGradient2.addColorStop(0　　,　'rgb(255,　0,　　　0)');
linearGradient2.addColorStop(0.5,　'rgb(　　0,　0,　255)');
linearGradient2.addColorStop(1　　,　'rgb(　　0,　0,　　　0)');
context.strokeStyle = linearGradient2;
context.strokeRect(125,　10,　100,　100);
</script>

Dies ist das Ergebnis des Zeichnens auf dem Canvas:

Farbverlaufskante

Wichtig ist zu verstehen, wie stark der Farbverlauf ist. Wenn der Farbverlauf von x = 10bis zu x = 110, dann nur die x-Werte介于10bis110zwischen den Geometrien eine Farbverlauf angewendet. Geometrien außerhalb dieses Bereichs werden noch vom Farbverlauf beeinflusst, aber mit dem ersten oder letzten Farbton des Farbverlaufs gezeichnet.
Angenommen, ein Farbverlauf erstreckt sich von x = 150 bis zu x =350. Der Farbverlauf verläuft von Blau nach Grün. Die x-Werte sind kleiner als150 gezeichneten Geometrien werden in Blau gezeichnet. Die x-Werte sind größer als350 gezeichneten Geometrien werden in Grün gezeichnet. Nur die x-Werte介于150 und35zwischen 0 und 0 zwischen den Geometrien eine Farbverlauf hat.
Dies ist ein Beispielcode, der die obige Farbverlauf verwendet, um5ein Rechteck, um dies zu verdeutlichen

<canvas id="ex3" width="500" height="250" style="border:　1px fest gestrichen #cccccc;">
　　　　HTML5　Canvas wird nicht unterstützt
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
var linearGradient1　= context.createLinearGradient(150,　350,0);
linearGradient1.addColorStop(0,39;rgb(0,　255)');
linearGradient1.addColorStop(1,　'rgb(0,　255, 0)');
context.fillStyle = linearGradient1;
context.fillRect(10,10,130,　100);
context.fillRect(150,10,　200,　100);
context.fillRect(360,10,　130,　100);
context.fillRect(100,120,　150,　100);
context.fillRect(280,120,　150,　100);
</script>

Dies ist das Ergebnis des Zeichnens auf dem Canvas. Beachten Sie, dass nur die x-Werte in150 bis350 zwischen den Grafiken hat einen Farbverlauf, während der Rest der Grafiken blau (erster Farbstop) oder grün (letzter Farbstop) ist.

Dieser Beispielcode verwendet nur2Farben verwendet werden, aber wenn im Farbverlauf3Farben verwendet werden, dann ist das Ergebnis gleich. Außerhalb des Farbverlaufs wird nur der erste und der letzte Farbstop verwendet.
Die Farbverlaufsstärke ist wichtig, um die richtige Färbung der Form zu verstehen. In vielen Fällen muss für jede Form eine spezifische Farbverlaufsform definiert werden, um den zu zeichnenden Bereich zu passen.

Ein radialer Farbverlauf

Ein radialer Farbverlauf ist ein kreisförmiges Muster, das von einer Farbe nach außen zu einer oder mehreren anderen Farben verläuft. Hier sind einige grafische Beispiele:

Ein radialer Farbverlauf wird durch2einzelnen Kreise definiert. Jeder Kreis hat einen Mittelpunkt und einen Radius. Dies ist ein Beispielcode:

var x1　=　100;　　　//　x　of　1.　circle　center　point
var y1　=　100;　　　//　y　of　1.　circle　center　point
var r1　=　30;　　　　//　radius　of　1.　circle
var x2　=　100;　　　//　x　of　2.　circle　center　point
var y2　=　100;　　　//　y　of　2.　circle　center　point
var r2　=　100;　　　//　radius　of　2.　circle
var radialGradient1　= context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient1.addColorStop(0,39;rgb(0,　255)');
radialGradient1.addColorStop(1,　'rgb(0,　255,　0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

). Wie Sie sehen können, werden zwei Mittelpunkte (x1, y1, und x2, y2()). Und sie definieren zwei Radien (r1und r2()). Diese werden als Parameter an createRadialGradient() übergeben2Die Funktion von D-Kontext.
Die beiden Kreise sollten mit verschiedenen Radien definiert werden, sodass sie eine Innenseite und eine Außenseite (mindestens in der Größe) erzeugen. Dann wird der Farbverlauf von einem Kreis in den anderen kreisförmig fortgesetzt.
funktionieren auf die gleiche Weise wie bei einer linearen Farbverlaufsform. Sie definieren, welche Farben im Farbverlauf verwendet werden, und wo im Farbverlauf diese Farben platziert werden sollen.
Hinzugefügte Farbstopps werden an irgendeiner Stelle zwischen den beiden Kreisen übereinstimmen. Zum Beispiel bedeutet der erste Parameter 0 in den Farbstopps, dass die Farben von der Stelle beginnen, an der sich der erste Kreis befindet. Der erste Parameter der Farbstopps1zeigt, dass die Farben von der Stelle beginnen, an der sich der zweite Kreis befindet.
Dies ist in HTML5Das Ergebnis des Zeichnens auf dem Canvas:

Wenn zwei Kreise den gleichen Mittelpunkt haben, wird die Farbverlaufsform vollständig kreisförmig sein und die Farben von der Innenseite zum Außenseite der Kugel verlaufen. Haben zwei Kreise unterschiedliche Mittelpunkte, wird der Farbverlauf mehr nach einem Kegelformigem aussehen, wie das Licht, das von einer Lampe abgestrahlt wird (nicht orthogonal auf die Oberfläche gerichtet). Dies ist ein Beispielcode in ähnlicher Kegelform:

var x1　=　100;
var y1　=　100;
var r1　=　30;
var x2　=　150;
var y2　=　125;
var r2　=　100;
var radialGradient1　= context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient1.addColorStop(0,39;rgb(0,　255)');
radialGradient1.addColorStop(1,　'rgb(0,　255,　0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

So sieht es aus, wenn man auf dem Canvas einen Verlauf zeichnet: