Farben und Styles - createRadialGradient()
Die Methode createLinearGradient dient zum Erstellen eines radialen Gradienten.
Die sechs Parameter definieren dabei Start- (x0, y0) mit Radius (radius0) und
Endmittelpunkt (x1, y1) mit Radius (radius1).
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 zeigt radiale Verläuft nicht korrekt an.
createRadialGradient
CanvasGradient createRadialGradient(x0, y0, radius0, x1, y1, radius1)
Die Methode erwartet sechs Parameter.
Parameter
x0 - Horizontale Koordinate des Mittelpunkts des ersten Kreises
y0 - Vertikale Koordinate des Mittelpunkts des ersten Kreises
radius0 - Radius des ersten Kreises
x1 - Horizontale Koordinate des Mittelpunkts des zweiten Kreises
y1 - Vertikale Koordinate des Mittelpunkts des zweiten Kreises
radius1 - Radius des zweiten Kreises
Rückgabe
CanvasGradient - Gradientschnittstelle
Schematische Darstellung
Die folgende Abbildung zeigt, wie die Grössen angetragen werden sowie die Wirkungsweise von Verlaufspunkten (vp1, vp2, vp3).
Beispiel
function drawIt(){
var objCanvas = document.getElementById("canvas_id");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
var objContext = objCanvas.getContext('2d');
var intBound = 5;
for(var i=0; i<intBound; i++){
// Farbverlauf bestimmen
if((i%intBound == 0) || (i%intBound == 4)){
var strCol1 = 'rgba(255, 255, 0, 0.2)';
var strCol2 = '#f00';
}else if((i%intBound == 1) || (i%intBound == 3)){
var strCol1 = 'rgba(0, 255, 0, 0.2)';
var strCol2 = '#00f';
}else{
var strCol1 = 'rgba(0, 0, 255, 0.2)';
var strCol2 = '#0ff';
}
// Linearen Verlauf erstellen
var objGradient = objContext.createRadialGradient(50, 50, 10, 50, 50, 40);
// Verlaufspunkte setzen
objGradient.addColorStop(0, strCol1);
objGradient.addColorStop(0.5, strCol2);
objGradient.addColorStop(1, strCol1);
// Füll-Style mit Gradient auszeichnen
objContext.fillStyle = objGradient;
// Kreis zeichnen
objContext.beginPath();
objContext.arc(50, 50, 40, 0, 2*Math.PI, true);
objContext.fill();
// Ursprung verschieben
objContext.translate(40, 0);
}
}else{
// Sonstiger Code
}
}
Erläuterung
In einer for-Schleife werden fünf Kreise gezeichnet. In jedem Schritt wird ein neuer radialer Farbverlauf erstellt und der aktuelle Kreis damit gefüllt. Am Ende eines jeden Schleifendurchlaufs wird der Ursrung der Zeichenfläche mit translate in x-Richtung verschoben.
Beim Generieren der Verlaufspunkte werden teilweise mit Hilfe der CSS-Eigenschaft rgba
Transparenzen in den Verlauf eingefügt. Mehr zu Farben und der Alphakomponente in der Einleitung
zum Kapitel
Farben und Styles.