Radiale Farbverläufe im Canvas-Element

Einfache und komplexere Grafikobjekte in einem Canvas-Element können nicht nur einfarbig in Erscheinung treten. Das Canvas-Element bietet darüber hinaus auch die Möglichkeit einer differenzierten farblichen Gestaltung mit Hilfe von Farbverläufen. Derartige Farbverläufe werden meist als Gradients / Gradienten bezeichnet. Neben den linearen Farbverläufen gibt es radiale Gradienten. Mit diesem Begriff werden Farbverläufe beschrieben, die sich ausgehend von einem Mittelpunkt kreisförmig verändern.

Allgemeine Vorgehensweise bei der Verwendung radialen Farbverläufe

Wie bei den linearen Farbverläufen müssen mehrere Einzelschritte befolgt werden:

• Canvas-Objekt referenzieren
• 2D-Context erstellen mit getContext
• im 2D-Context linearen Gradienten erstellen mit createRadialGradient
• dem Gradienten Farbverlaufspunkte zuweisen mit addColorstop
• den Gradienten mit fillStyle oder auch strokeStyle aktivieren.

Syntax

Beispiele zur Verwendung von radialen Gradienten

Beispiele ansehen