JavaScript/Canvas/Stile und Farben

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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:

Verlauf mit canvasGradient[Bearbeiten]

Beachten Sie, dass die Darstellung eines Farbverlaufs nicht von der Größe oder Position des zu zeichnenden Rechtecks abhängt. Farbverläufe werden beim Zeichnen stets unskaliert über das Rechteck gelegt, wobei die obere linke Ecke des Farbverlauf auf der oberen linken Ecke der Canvas liegt.
Empfehlung: Erstellen Sie Ihr Objekt in der linken oberen Ecke und verschieben Sie es mit einer Transformation an die gewünschte Position.

linearGradient[Bearbeiten]

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.

Beispiel ansehen …
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);
}
In diesem Beispiel wird mit 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.
Beachten Sie: Hätte der Verlauf die Breite der Rechtecke, wäre das rechte Rechteck nur weiß gefüllt, da es außerhalb des definierten Bereichs läge.

radialGradient[Bearbeiten]

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.

Beispiel ansehen …
  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();     
	}
  }
In diesem Beispiel wird mit 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[Bearbeiten]

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) oder
  • no-repeat (einmalige Darstellung ohne Bildwiederholung).
Beachten Sie: Da der Wert für type keine Variable, sondern eine Zeichenkette ist, müssen Sie es in Anführungszeichen setzen!
Beispiel ansehen …
  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();
  }
In diesem Beispiel wird mit 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.

Das anschließend erstellte Rechteck wird dann mit dem Muster gefüllt.

Schatten[Bearbeiten]

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.

Beispiel ansehen …
  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);	
  }
Es werden ein Rechteck und ein Text auf die Leinwand gezeichnet. Das Rechteck erhält eine gelbe Füllung und einen Schatten.
Der anschließend gezeichnete Text erhält eine rote Füllung, die vorher festgelegte Schattierung wird übernommen.

Siehe auch:

Rahmenlinien[Bearbeiten]

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ür stroke relevant): Legt fest, welches Aussehen die Enden von Linien haben: butt (Standardeinstellung, keine Veränderung), round (fügt abgerundetes Ende hinzu) und square (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) oder miter (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 mit lineJoin = 'miter', Standardwert: 10). Überschreitet die Breite der Spitze diesen Wert, so wird sie genauso dargestellt wie lineJoin = 'bevel'.


Weblinks[Bearbeiten]


Generatoren: