Schnittstellen/Objekte - CanvasGradient
Es gibt zwei Arten von Verläufen, lineare und radiale. Beide werden durch Objekte
repräsentiert, die die CanvasGradient-Schnittstelle implementiert.
Wurde ein Verlauf generiert, können in ihm Verlaufspunkte gesetzt werden, an denen Farben definiert werden, die der Verlauf durchlaufen muss. Zwischen den Verlaufspunkten müssen die Farben und Alphakomponenten linear interpoliert werden. Vor dem ersten Verlaufspunkt muss die Farbe der des ersten Punktes entsprechen, nach dem letzten, der des letzten. Existieren keine Verlaufspunkte, ist der Verlauf transparent schwarz.
IE (ExplorerCanvas)
Die IE-Erweiterung ExplorerCanvas hat Anzeigeprobleme bei der Darstellung mit
mehreren Verlaufspunkten. Angezeigt werden nur die Start- und Endfarbe.
addColorStop
addColorStop(offset, color)
Mit der addColorStop-Methode der CanvasGradient-Schnittstelle wird
ein neuer Verlaufspunkt gesetzt.
Parameter
offset
Gibt die Position des Verlaufspunkts relativ zum gesamten Verlauf an. Wird ein Wert kleiner als 0
oder ein Wert grösser als 1 angegeben, wird eine INDEX_SIZE_ERR-Ausnahme ausgelöst.
color
Der Parameter muss einen CSS-Farbwert repräsentieren. Sollte ein ungültiger Wert übergeben werden,
wird eine SYNTAX_ERR-Ausnahme ausgelöst.
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 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.