Farben und Styles - createLinearGradient()
Die Methode createLinearGradient dient zum Erstellen eines linearen Gradienten.
Die übergebenen Parameter definieren dabei Start- (x0, y0) und Endpunkt (x1, y1).
Zurückgegeben wird ein Objekt vom Typ CanvasGradient, das mit der Methode addColorStop die Möglichkeit bietet, im Verlauf Farbpunkte zu setzen, die als Etappenziele dienen und durchlaufen werden müssen.
IE (ExplorerCanvas)
Die IE-Erweiterung ExplorerCanvas hat Anzeigeprobleme bei der Darstellung mit
mehreren Verlaufspunkten. Angezeigt werden nur die Start- und Endfarbe.
createLinearGradient
CanvasGradient createLinearGradient(x0, y0, x1, y1)
Die Methode erwartet vier Parameter.
Parameter
x0 - Horizontale Koordinate des Startpunkts
y0 - Vertikale Koordinate des Startpunkts
x1 - Horizontale Koordinate des Endpunkts
y1 - Vertikale Koordinate des Endpunkts
Rückgabe
CanvasGradient - Gradientschnittstelle
Schematische Darstellung
Die folgende Abbildung zeigt einen Farbverlauf von gelb über rot nach blau. Die Verlaufspunkte (vp1, vp2, vp3) teilen die Verlaufstrecke gleichmässig.
Beispiel
function drawGradient(){
var objCanvas = document.getElementById("canvas_id");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
var objContext = objCanvas.getContext("2d");
// Linearen Verlauf erstellen
var objGradient = objContext.createLinearGradient(0, 0, 280, 0);
// Verlaufspunkte setzen (gelb->rot->blau->gruen)
objGradient.addColorStop(0, '#ff0');
objGradient.addColorStop(0.3, '#f00');
objGradient.addColorStop(0.3, '#f00');
objGradient.addColorStop(0.7, '#0000ff');
objGradient.addColorStop(0.7, '#00f');
objGradient.addColorStop(1, 'rgba(0,255,0,0.5)');
// Füll-Style mit Gradient auszeichnen
objContext.fillStyle = objGradient;
// Rechteck zeichnen
objContext.fillRect(10, 10, 280, 120);
}else{
// Sonstiger Code
}
}
Erläuterung
Im Beispiel wird ein vertikaler Farbverlauf von gelb über rot und blau nach grün (halbtransparent)
erstellt. Zunächst wird mit der Methode createLinearGradient ein
CanvasGradient-Objekt
erstellt. Mit Hilfe der
addColorStop-Methode werden die benötigten Verlaufspunkte gesetzt.
Anschließend wird das
CanvasGradient-Objekt der Eigenschaft
fillStyle
als Füllmethode zugewiesen.
addColorStop werden im zweiten Argument Farbwerte in unterschiedlicher CSS-Syntax übergeben, wobei die Eigenschaft rgba kurz erläutert werden soll. Die ersten drei Argumente sind Integerwerte (0 - 255) und entsprechen den Farbwerten rot, grün, blau. Im letzten Argument wird ein Transparenzwert (Alphawert) zwischen 0.0 und 1.0 übergeben.