Dokumentation (canvas.quaese.de)

Schatten - shadowColor

Das Attribut shadowColor dient zum Setzen der Schattenfarbe. Die Angabe der Farbe folgt den Bedinungen, wie unter Farben & Styles beschrieben und kann dort nachgelesen werden.

Der Initialwert beim Erstellen des HTMLCanvasElements muss 100% transparentes Schwarz sein.

shadowColor

shadowColor = string

string - gültiger Farbwert (siehe Farben & Styles)

Beispiel

function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    var objContext = objCanvas.getContext('2d');

    // Array mit Farbwerten
    var arrColor = new Array("rgba(64, 64, 64, 0.5)",
                             "rgba(255, 0, 0, 0.5)",
                             "rgba(0, 255, 0, 0.5)",
                             "rgba(0, 0, 255, 0.5)",
                             "rgba(255, 255, 0, 0.5)");

    // Schattenoffset
    objContext.shadowOffsetX = 10;
    objContext.shadowOffsetY = 5;
    // Schattenunschärfe
    objContext.shadowBlur = 5;

    // Füllfarbe
    objContext.fillStyle = "#000";

    for(var i=0; i<arrColor.length; i++){
      // Neues Dreieck beginnen
      objContext.beginPath();
      objContext.moveTo(50, 20);
      objContext.lineTo(20, 60);
      objContext.lineTo(80, 60);
      objContext.lineTo(50, 20);

      // Schattenfarbe zuweisen
      objContext.shadowColor = arrColor[i];

      // Dreieck füllen
      objContext.fill();
      // Ursprung verschieben
      objContext.translate(80, 0);
    }
  }else{
    // Sonstiger Code
  }
}

Erläuterung

Zu Beginn des Beispiels wird ein Array mit fünf verschiedenen Farben und Transparenzwerten erstellt. Weiterhin werden Offsetwerte für die Schatten und eine Füllfarbe definiert.

In einer for-Schleife werden anschliessend fünf Dreiecke gezeichnet. In jedem Schleifendurchlauf wird eine andere Schattenfarbe aus dem Farbarray entnommen und shadowColor zugewiesen.

Schatten - shadowColor

shadowColor

string - gültiger Farbwert (siehe Farben & Styles)

Beispiel

Erläuterung

Anzeige