[HTML5, Canvas] Farbverlauf zeichnen

Drucken
( 0 Votes ) 
Hauptkategorie: Programmieren Kategorie: HTML5
Erstellt am 12.04.2013 Zuletzt aktualisiert am 03.05.2013 Geschrieben von Jonny132
Einen Farbverlauf mittels HTML5 und Canvas zu zeichnen ist nicht schwer.
Dazu müssen wir ein Canvas erstellen auf welches wir später mittels JavaScript und der Funktion getElementById() zugreiffen können.
<canvas id="meinFarbverlaufCanvas" width="300" height="300">
</canvas>
Dann müssen wir zuerst mittels der Funktion getContext() den Kontext des Canvas holen.
Denn nur der Kontext lässt sich bearbeiten und somit auch bemalen.

Linearer Farbverlauf:
<script>
var e=document.getElementById("meinFarbverlaufCanvas");
var canv=e.getContext("2d");
var gradient=canv.createLinearGradient(0,0,300,0);
gradient.addColorStop(0,"darkgreen");
gradient.addColorStop(0.5,"white");
gradient.addColorStop(1,"lightgreen");
canv.fillStyle=gradient;

canv.fillRect(190,0,100,100);
canv.arc(150,150,100,0,2*Math.PI);
canv.fill();
canv.font="30px Arial";
canv.fillText("tuts4you",10,250);
</script>
Für einen Linearen Farbverlauf erstellen wir eine neue Variable welche mittels der Rückgabefunktion createLinearGradient() des Contextes gefüllt wird.

Die Funktion createLinearGradient nimmt 4 Parameter entgegen:
1. Parameter: Ab welcher X-Koordinate mit dem Farbverlauf begonnen werden soll
2. Parameter: Neigung nach Links in Pixel
3. Parameter: Bis zu welcher X-Koordinate der Farbverlauf gehen soll
4. Parameter: Neigung nach Rechts in Pixel

Den Farbverlauf kann man nun mit verschiedenen Stufen und Farben füllen. Dazu muss nur die addColorStop der Gradient-Variable aufgerufen werden, welche als ersten Parameter die Stufe und als zweiten Parameter die Farbe entgegennimmt. Die Stufen werden als Gleitkommazahl zwischen 0 und 1 angegeben.

Zu Schluss wird der Farbverlauf dem fillStyle zugewiesen und auf ein Bestimmtes Objekt gemalt.


HTML5 Farbverlauf


Radialer Farbverlauf:

Der radiale Farbverlauf unterscheidet sich zum linearen Farbverlauf nur in der aufzurufenden Funktion.
Am besten zeigbar ist dies mit einem Beispiel.
<script>

var e=document.getElementById("meinFarbverlaufCanvas");
var canv=e.getContext("2d");

var gradient=canv.createRadialGradient(150,150,50,150,150,100);
gradient.addColorStop(0,"darkgreen");
gradient.addColorStop(0.5,"white");
gradient.addColorStop(1,"lightgreen");

canv.fillStyle=gradient;
canv.fillRect(190,0,100,100);
canv.arc(150,150,100,0,2*Math.PI);
canv.fill();
canv.font="30px Arial";
canv.fillText("tuts4you",10,250);

</script>

HTML5 radialer Farbverlauf     


    Veröffentlichen Sie ihre Kommentare ...