• Allgemeines
• Schnittstellen/Objekte
• Canvas-Zustand
• Transformationen
• Rechtecke
• Pfad-Schnittstelle
• Farben und Styles
  • createLinearGradient()
  • createPattern()
  • createRadialGradient()
  • fillStyle
  • strokeStyle
• Linienstile
• Schatten
• Verknüpfungen
• Bilder zeichnen
• Pixel-Manipulation
• Anwendungen
• Links
• Sitemap
• Impressum

<canvas> - Farben und Styles

Dieser Abschnitt widmet sich den Farben und Stilen. Mit Hilfe der geeigneten Attribute und Methoden ist es möglich, das gewünschte Aussehen zu definieren und zuzuweisen. Hierzu stehen neben dem schlichten Zuweisen von Füll- und Linienfarben die Möglichkeiten zur Verfügung, Farbverläufe (Gradienten) oder Muster (Pattern) zu erstellen.

Farben

Bei der Definition einer Farbe wird zwischen zwei prinizipiellen Zuständen unterschieden:

1. keine Transparenz (alpha = 1.0)
2. Transparenz (0.0 < alpha < 1.0)

1. Keine Transparenz (alpha = 1.0)

Im ersten Fall reicht es aus, einen 6-stelligen Hexadezimalwert mit einem #-Zeichen als Vorsilbe anzugeben (Bsp: #3f49ae).

#rrggbb

Hierbei repräsentieren die ersten beiden Stellen des Hexadezimalwertes den Rotanteil (r), die dritte und vierte Stelle den Grünanteil (g) und die letzten beiden Stellen den Blauanteil (b). Jede Stelle kann hierbei die Werte 0-9 und a-f annehmen, wobei bei den Buchstaben nicht zwischen Gross- und Kleinschreibung unterschieden wird (Bsp: #3f49ae = #3F49Ae).

2. Transparenz (0.0 < alpha < 1.0)

Im zweiten Fall kann zusätzlich zu den Farbwerten ein Transparenzwert angegeben werden. Dazu steht die CSS-Eigenschaft rgba zur Verfügung.

rgba(red, green, blue, alpha)

Es handelt sich hierbei um einen literalen Wert, der mit rgba und einer folgendenöffnenden Klammer eingeleitet wird. Abgeschlossen wird er durch eine schliessende Klammer. Zwischen dem Klammernpaar werden die Farbwerte sowie die Alphakomponente durch Kommata getrennt angegeben. Dabei entspricht der erste Wert dem Rotanteil (red), der zweite dem Grünanteil (green), der dritte dem Blauanteil (blue) und der vierte der Transparenz (alpha). Die Farbwerte können im Bereich von 0-255 (0=kein Anteil, 255= voller Anteil) angegeben werden. Der Transparenzwert kann zwischen 0.0 (volle Transparenz) und 1.0 (keine Transparenz) liegen.

Stile

Wie oben schon angedeutet, stehen zwei verschiedene Arten an Stilen zur Verfügung

1. Farbverläufe (Gradienten)
2. Muster (Pattern)

1. Farbverläufe (Gradienten)

Auch hier wird nochmals einer Unterteilung vorgenommen - lineare und radiale Verläufe. Beiden gemein ist das Objekt CanvasGradient, das einen Verlauf beschreibt und mit addColorStop die erforderliche Methode zum Setzen von Verlaufspunkten bietet (siehe Schnittstellen/Objekte).

2. Muster (Pattern)

Hiermit wird es möglich, ein Element mit einem Muster zu füllen. Auch hierfür steht mit CanvasPattern eine eigene Schnittstelle zur Verfügung (siehe Schnittstellen/Objekte).

Attribute und Methoden

• strokeStyle - (Attribut) Farbe und/oder Style einer Linie
• fillStyle - (Attribut) Farbe und/oder Style einer Füllung
• createLinearGradient - (Methode) erstellt einen linearen Farbverlauf
• createRadialGradient - (Methode) erstellt einen radialen Farbverlauf
• createPattern - (Methode) erstellt ein Füllmuster in einem übergebenen Bild
• createPattern - (Methode) erstellt ein Fullmuster im Canvas-Element