HTML and CSS Reference
In-Depth Information
verwenden, muss zunächst ein Objekt vom Typ
canvasGradient
oder
canvasPattern
erstellt und bearbeitet werden. Um einen neuen Verlauf zu erzeugen, können wir
folgende Methoden nehmen:
canvasGradient createLinearGradient(in float x0, in float y0, in float x1,
in float y1);
canvasGradient createRadialGradient(in float x0, in float y0, in float r0,
in float x1, in float y1, in float r1);
createLinearGradient
erwartet je zwei x-/y-Koordinaten, die als Start-und Endpunkt
des zu erstellenden Verlaufs verstanden werden können. Stellen Sie sich vor, wie die
beiden Punkte eine Linie im aktuellen Canvas definieren. An dieser Stelle wurden noch
keinerlei Farbwerte für den Verlauf zugewiesen.
Um nun den Farbverlauf zu definieren, wird die Methode
addColorStop()
benutzt. Der
erste Parameter kann ein Wert von 0 bis 1 sein und definiert prozentual, ab welcher Stelle
im Verlauf der zweite Parameter, ein beliebiger CSS-Farbwert, zur Wirkung kommt.
Bild 2.18:
Definition eines Farbverlaufs mit
addColorStop()
.
//linearGradient
var linearGradient;
for (i 0; i<6; i++)
{
linearGradient ctx.createLinearGradient(i*46, 0, (i*46)+40,
Math.floor((40/5)*i)); //absolute to canvas!!
linearGradient.addColorStop(0, 'rgb(255,0,0)');
linearGradient.addColorStop(0.5, 'rgb(0,255,0)');
linearGradient.addColorStop(1, 'rgb(0,0,255)');
ctx.fillStyle linearGradient;
ctx.fillRect(i*46,10,40,40);
}
Recht ähnlich wird die Methode
createRadialGradient()
benutzt, um kreisförmige
Verläufe zu erstellen. Die Parameter der Methode geben wie bei
createLinearGradient()
nicht die zu verwendenden Farben an, sondern definieren
zwei Kreise, die wiederum als Start- und Endkreis bezeichnet werden können. Betrach-
ten wir einen solchen Methodenaufruf genauer:
var radialGradient ctx.createRadialGradient(140,150,0,140,150,50);
Die drei Parameter
140,150,0
geben dabei den Startkreis des Verlaufs an. Am Punkt
(140, 150)
wird der Startkreis mit 0 Pixeln Radius definiert. Es folgt die Definition des
