Mit Farben und Farbverläufe mit dem HTML5-Canvas-Tag

jede Operation in HTML5 ist fast Segeltuch

Funktion implementiert eine Füllung oder Schlaganfall Stil. Um das Beste aus der Leinwand zu bekommen, müssen Sie verstehen, wie sie funktionieren. Die drei Haupttypen von Arten, die Sie auf Flächen und Konturen verwenden können, sind Farben, Verläufe und Muster.

Anwenden von Farben mit dem HTML5-Canvas-Tag

So geben Sie eine Füllung oder Strichfarbe in der Segeltuch Tag, können Sie die gleiche Farbe Werkzeuge, die Sie in CSS und HTML verwenden verwenden:

  • Sechsstellige Hex-Werte: Die sechsstellige hexadezimale Regelung, die gemeinhin in CSS verwendet wird, verwendet zwei Stellen jeweils für Rot, Grün und Blau. Der Wert beginnt mit einem Pfund-Zeichen. Beispielsweise, # FF0000 ist rot, und # FFFF00 ist gelb.

  • Die dreistellige Hex-Werte: Hex-Farbwerte verwenden häufig wiederholende Werte, so dass Sie diese Werte als dreistellige Zahlen abkürzen kann. In diesem Schema ist rot # F00, und gelb # FF0.

  • Farbnamen: Sie können oft Farbnamen, wie "rot" oder mit "gelb". Gemeinsame Farbnamen werden in der Regel funktionieren, aber nicht alle Browser unterstützen die gleiche Liste von Farb Namen- "Papaya Peitsche" ist wahrscheinlich nicht unterstützt werden.

  • RGB und RGBA-Werte: Sie können die Verwendung rgb () Funktion Farben zu erzeugen ganzen Zahlen (0-255) oder Prozenten (0% -100%) verwendet wird. rot ist rgb (255, 0, 0) und gelb rgb (100%, 100%, 0%). Beachten Sie, dass die rgb Funktion muss in Anführungszeichen wie jede andere Farbe Wert gehen. Wenn Sie alpha aufnehmen möchten, fügen Sie einen vierten Parameter, die eine Null-Eins-Wert ist. Transparent rot wäre rgba (255, 0, 0, 0,5).

  • HSL und HSLA: Das neue hsl und HSLA Farbformate sollen durch die unterstützt werden Segeltuch Element, aber so weit variiert die Unterstützung für diese Funktionen durch Browser.

Beachten Sie, dass die verschiedenen Werte für eine Farbe sind in Anführungszeichen immer eingeschlossen. Der Farbparameter ist eine Zeichenfolge, die als CSS Farbe interpretiert werden kann.

Anwenden von Verläufen mit dem HTML5-Canvas-Tag

Sie können auch eine Form mit einem Gradienten füllen. Canvas-Gradienten werden in zwei Schritten definiert:

  • Erstellen Sie einen Gradienten-Objekt. Es gibt zwei in das Kontextobjekt gebaut Methoden. Man baut linearen Gradienten, und der andere baut radiale Gradienten.

  • In Farbe stoppt. EIN Farbanschlag ist ein besonderes Element, das eine Farbe zeigt dem Gradienten hinzugefügt werden. Sie können so viele Farben hinzufügen, wie Sie wollen, und Sie können auch, wo entlang der Verlaufsmuster geben Sie die Farbe angezeigt.

Der folgende Code erstellt eine radiale Gradienten und eines linearen Gradienten auf einer Leinwand:

Funktion draw () {var Zeichnung = document.getElementById ( "Zeichnung") - var con = drawing.getContext ( "2D") - // bauen eine lineare gradientlGrad = con.createLinearGradient (0,0,100,200) -lGrad.addColorStop (0 "# FF0000") - lGrad.addColorStop (0,5, "# 00FF00") - lGrad.addColorStop (1, "# 0000FF") - con.fillStyle = lGrad-con.fillRect (0, 0, 100, 200) - // bauen eine radiale gradientrGrad = con.createRadialGradient (150, 100,0, 150, 100, 100) -rGrad.addColorStop (0, "# FF0000") - rGrad.addColorStop (0,5, "# 00FF00") - rGrad.addColorStop (1, "# 0000FF") - con.fillStyle = rGrad-con.fillRect (100,0, 200, 200) -} // end Unentschieden

Der Ausgang dieser Code wird hier gezeigt:

bild0.jpg

EIN linear Gradient ist ein Muster von Farben, die entlang einer geradlinigen Weg ineinander. Um einen linearen Gradienten zu definieren, gehen Sie folgendermaßen vor:

  1. Erstellen Sie eine Variable, die die Steigung zu halten.

    Gradients sind ein wenig komplexer als einfache Farben, so dass sie in Variablen gespeichert wiederverwendet werden.

  2. Erstellen Sie die Steigung, mit der createLinearGradient () Verfahren des Kontextobjekt eines linearen Gradienten zu bauen.

  3. Definieren Sie den Gradienten Pfad mit der createLinearGradient () Verfahren.

    Er erwartet, dass vier Parameter, die eine Linie (x1, y1, x2, y2) zu definieren. Die Farben werden senkrecht zu dieser Linie, so dass, wenn Sie horizontale Farbbänder wollen, eine vertikale Linie zu zeichnen. Wenn Sie vertikale Farbbänder wollen, eine horizontale Linie zu zeichnen. Die Linie dauert in der Regel über die gesamte Breite oder Höhe des Elements, aber es muss nicht. Wenn die Zeile kleiner als das Bild ist, wird der überschüssige Bereich automatisch die Farbe aus dem nächstgelegenen Ende des Gradienten zugeordnet.

  4. In Farbe stoppt.

    Gradients sind nicht viel Spaß, ohne Farben. Das addColorStop () Verfahren des Gradienten-Objekt können Sie eine Farbe auf den Farbverlauf hinzuzufügen. Jede Farbe Anschlag zwei Parameter: Position und Farbe. Die Position ist ein 0-1 Wert, der anzeigt, wo auf dem Gradienten Linie sollte die Farbe positioniert werden. 0 ist der Beginn, 1 ist das Ende und Zwischenwerte werden in der Mitte. Der Farbparameter ist ein Textwert, der als CSS Farbe ausgewertet werden kann. Zumindest sollten Sie zwei Farbstopps definieren, eine für den Anfang und eine für das Ende.

  5. Tragen Sie die Steigung als Füllmuster.

    Wenn Sie die Steigung als Füllmuster verwenden möchten, setzen Sie den Kontext des fillStyle der Steigung Variable, die Sie gerade erstellt haben. Alle nachfolgenden füllt das Verlaufsmuster gemacht werden werden (bis die fillStyle wird auf etwas anderes geändert).

Radial-Gradienten sind ähnlich. Anstatt einen Gradienten in einer geraden Linie zeichnen, zeichnen sie eine Reihe von kreisförmigen Farbbänder. Die erste Farbe ist der Mittelpunkt des Kreises, und die letzte Farbe definiert einen äußeren Radius. eine radiale Gradienten Gebäude ist sehr ähnlich wie bei einem linearen Gradienten aufzubauen. Der einzige Unterschied ist die erstellen Befehl.

Verwenden Sie die Konsole des Objekts createRadialGradient () Verfahren einen radialen Gradienten zu bauen. Dieser Befehl nimmt tatsächlich sechs Parameter:

  • BeginX: Die X-Position des Startpunkts. Dies ist oft in der Mitte Ihrer Form.

  • BeginY: Zusammen mit BeginX, dies bestimmt die Anfangsposition des Gradienten.

  • beginRadius: Der Radius des Mittelkreises. Normalerweise ist dies Null, aber man kann es größer machen, wenn Sie in der Mitte Farbe mehr betonen wollen.

  • ENDX: Beschreibt die X-Position des Endes Kreises. Typischerweise ist dies das gleiche wie BeginX.

  • Endy: Zusammen mit ENDX, definiert die Position des Endes Kreises. Wenn der Anfang und das Ende Kreise die gleichen Positionen haben, werden Sie mit einem kreisförmigen Gradienten erhalten. Ändern Sie die Endposition des Gradienten Strecke in eine bestimmte Richtung zu machen.

  • endRadius: Die Endung Radius definiert, wo der letzte Farbverlauf platziert werden. Kleinere Werte für dieses Radius wird zu einem dicht gruppiert Gradienten führen, und größere Werte wird die Steigung entlang einer größeren Fläche verteilt.

Sobald der Gradient definiert ist, die addColorStops () Methode funktioniert genau wie es für lineare Verläufe tut. Die Variable durch die erzeugte addRadialGradient () Befehl wird in der Regel in einer Variable gespeichert, wo sie für die anschließende verwendet werden können, fillStyle () Anfragen.

Ähnliche

Menü