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.
Die IE-Erweiterung ExplorerCanvas
zeigt radiale Verläuft nicht korrekt an.
CanvasGradient createRadialGradient(x0, y0, radius0, x1, y1, radius1)
Die Methode erwartet sechs Parameter.
Die folgende Abbildung zeigt, wie die Grössen angetragen werden sowie die Wirkungsweise von Verlaufspunkten (vp1, vp2, vp3).
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 } }
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.