JavaScript/Canvas/Stile und Farben
Die von den Canvas-Funktionen verwendete Füll- und Rahmenfarbe wird zentral in den Membervariablen fillStyle (Füllfarbe) und strokeStyle (Rahmenfarbe) gespeichert.
Diese können folgende Typen von Inhalt besitzen:
- CSS-konforme Farbangaben z. B.
rgb(128 192 16 / 0.5),rgb(16 16 16),#668822oderblack - Gradient-Objekte zur Darstellung von Farbverläufen
- Pattern-Objekte zur Darstellung von Mustern
Inhaltsverzeichnis
Verlauf mit canvasGradient
linearGradient
Lineare Gradient-Objekte können mithilfe der Memberfunktion createLinearGradient(x1, y1, x2, y2) erstellt werden. Diese Funktion erzeugt einen Farbverlauf, der entlang einer gedachten Linie vom Punkt P1(x1 | y1) zum Punkt P2(x2 | y2) verläuft. Dabei legen sogenannte ColorStops fest, an welchen Punkten auf der Gerade der Farbverlauf einen bestimmten Farbwert annehmen muss. Diese ColorStops werden mithilfe der Memberfunktion addColorStop(pos, col) des Gradient-Objekts gesetzt. Das Attribut pos gibt dabei die Entfernung des ColorStops relativ zum Punkt P1 an, sein Wert kann nur zwischen 0 und 1 liegen. Ein Wert von 0 positioniert den ColorStop im Punkt P1, der Wert 0.5 genau in der Mitte und der Wert 1 im Punkt P2. Das col-Attribut gibt schließlich die Farbe des ColorStops an. Der Bereich vor dem ersten bzw. nach dem letzten ColorStop wird dabei in der Farbe des ersten bzw. letzten ColorStops gezeichnet. Bedenken Sie, dass sich der Farbverlauf ähnlich einem Strahl senkrecht zur gedachten Linie ausbreitet, in diese Richtung also "gestreckt" wird.
function zeichnen() {
var element = document.getElementById("canvas");
var ctx = element.getContext("2d");
var grad = ctx.createLinearGradient(0, 0, 300, 0);
grad.addColorStop(0, "black");
grad.addColorStop(0.5, "red");
grad.addColorStop(1, "white");
ctx.fillStyle = grad;
ctx.fillRect( 10, 10, 130, 70);
ctx.fillRect(160, 10, 130, 70);
}
radialGradient
Radiale Gradient-Objekte werden mithilfe der Memberfunktion createRadialGradient(x1, y1, r1, x2, y2, r2) erstellt und arbeiten fast nach demselben Prinzip wie lineare Gradient-Objekte. Einziger Unterschied ist, dass der Farbverlauf hier vom Umfang des kleinen Kreises K1 zum Umfang des großen Kreises K2 verläuft. Der Inhalt von K1 ist dabei gleich der Farbe des ersten ColorStops und alles außerhalb des Kreises K2 gleich dem letzten ColorStop.
function zeichne() {
var element = document.getElementById('canvas');
if(element.getContext) {
var context = element.getContext('2d');
var gradient = context.createRadialGradient(90, 90, 5, 90, 90, 70);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'darkorange');
context.fillStyle = gradient;
context.arc(80, 80, 60, 0, 2 * Math.PI);
context.fill();
}
}
createRadialGradient() ein kreisförmiger Verlauf festgelegt. Da er nicht genau in der Mitte des gezeichneten Balls liegt, entsteht ein Beleuchtungseffekt, den Sie mit einem Schattenwurf noch verstärken könnten.Muster mit createPattern
Pattern-Objekte erzeugen tapetenähnliche Effekte und können mithilfe der Memberfunktion createPattern(img, type) erstellt werden. img ist dabei entweder ein img, canvas oder video-Element, das als Hintergrund verwendet werden soll.
type kann einen der folgenden vier Werte annehmen:
repeat(Wiederholung des Bilds in x und y-Richtung),x-repeat(nur in x-Richtung),y-repeat(nur in y-Richtung) oderno-repeat(einmalige Darstellung ohne Bildwiederholung).
type keine Variable, sondern eine Zeichenkette ist, müssen Sie es in Anführungszeichen setzen! function draw() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
var image = document.getElementById('vorlage');
var muster = context.createPattern(image,'repeat');
context.rect(0, 0, 500, 300);
context.fillStyle = muster;
context.fill();
}
createPattern() ein Muster zum Füllen der Seite verwendet.Als Vorlage dient eine Rastergrafik, die auf der Seite bereits geladen wurde, und über ihre id referenziert wird. Mit ihr wird ein Muster mit context.createPattern(image,'repeat'); erstellt.
Schatten
Neben einfachen Farbangaben besitzt Canvas außerdem die Fähigkeit, Objekte mit Schatten zu versehen. Das genaue Aussehen solcher Schattens kann dabei mit folgenden Membervariablen bestimmt werden:
-
shadowColor: Als String gespeicherte CSS-konforme Farbangabe, die als Schattenfarbe verwendet werden soll (Gradient- und Pattern-Objekte sind hier nicht erlaubt). -
shadowBlur: Gibt an, wie verwaschen der Schatten wirken soll. Umso größer der Wert, umso unschärfer wirkt der Schatten. Ein Wert von 0 erzeugt eine scharfe Darstellung (für mehr Informationen siehe CSS: box-shadow). -
shadowOffsetX: Die Versetzung des Schattens in x-Richtung (weitere Informationen siehe ebenda). -
shadowOffsetY: Die Versetzung des Schattens in y-Richtung.
Berücksichtigen Sie, dass diese Membervariablen bei allen Funktionen, die etwas auf das Canvas-Element zeichnen (außer clearRect), bei entsprechendem Wert von shadowColor einen Schatten erzeugen. Konkret sind dies alle Funktionen, die fill oder stroke im Namen tragen.
function draw() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.rect(0, 0, 500, 300);
context.fillStyle= '#dfac20';
context.shadowBlur= 20;
context.shadowColor= 'black';
context.fillRect(canvas.width / 2 -75, canvas.height / 2 +50, 150, 30);
context.fillStyle= '#c32e04';
context.font = '60px Arial';
context.textBaseline = 'middle';
context.textAlign = 'center';
context.fillText('Hallo!', canvas.width / 2, canvas.height / 2);
}
Der anschließend gezeichnete Text erhält eine rote Füllung, die vorher festgelegte Schattierung wird übernommen.
Siehe auch:
- hacks.mozilla: Calculated drop shadows in HTML5 canvas
Rahmenlinien
Weiterhin ist auch das Aussehen von Linien, wie sie von den Canvas-Funktionen strokeRect, stroke und strokeText (dazu später mehr) erzeugt werden, mit folgenden Membervariablen beeinflussbar. Beachten Sie dabei insbesondere in Verbindung mit stroke, dass nur der Wert der Membervariablen zum Aufrufzeitpunkt von stroke relevant ist, nicht zum Zeitpunkt der Path-Generierung.
-
lineCap(nur fürstrokerelevant): Legt fest, welches Aussehen die Enden von Linien haben:butt(Standardeinstellung, keine Veränderung),round(fügt abgerundetes Ende hinzu) undsquare(fügt ein kleines Quadrat hinzu) -
lineJoin: Legt fest, wie die Spitze, die beim Aufeinandertreffen zweier Linien entsteht, angezeigt werden soll:bevel(wird die Spitze aufgrund eines kleinen Winkels sehr lang, wird sie teilweise abgeschnitten),round(abgerundete Spitzen) odermiter(Standardeinstellung, Ecken werden unverändert angezeigt) -
lineWidth: Die Breite (Stärke) aller gezeichneten Linien als Integer-Wert -
miterLimit: Die maximale Breite der Spitze, die beim Aufeinandertreffen zweier Linien entsteht, als Integer-Wert (nur in Verbindung mitlineJoin = 'miter', Standardwert: 10). Überschreitet die Breite der Spitze diesen Wert, so wird sie genauso dargestellt wielineJoin = 'bevel'.
Weblinks
- W3C: Fill and stroke styles
- WHATWG: canvas-Element
- WHATWG: CanvasFillStrokeStyles
Generatoren:
- HTML5 Canvas Gradient Creator von Ezekiel Victor
createLinearGradient()ein 300px breiter Verlauf festgelegt. Er wechselt von schwarz über rot zu weiß.Anschließend werden zwei Rechtecke mit dem Verlauf gefüllt. Da der Verlauf immer im Ursprung (0,0) beginnt, werden die Rechtecke mit anderen Bereichen des Verlaufs gefüllt.