Dokumentation (canvas.quaese.de)

Schatten - shadowOffsetY

Mit dem Attribut shadowOffsetY wird die vertikale Verschiebung des Schattens zum Ausgangselement angegeben. Die Werte können positive und negative sein, entsprechend der gewüschten Richtung des Schattens.

Initialwert ist 0.

shadowOffsetY

shadowOffsetY = value

value - Fliesskommawert

Schematische Darstellung

Aus der folgenden Abbildung wird ersichtlich, wo sich das horizontale Offset befindet.

shadowOffsetY

Beispiel

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

    // Schattenunschärfe
    objContext.shadowBlur = 2;
      objContext.shadowOffsetX = 0;

    // Schattenfarbe zuweisen
    objContext.shadowColor = "rgba(64, 64, 64, 0.7)";

    // Füllfarbe
    objContext.fillStyle = "#00f";

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

      // Schattenoffset
      objContext.shadowOffsetY = 5 + i;

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

Erläuterung

Im Beispiel werden fünf Dreiecke gezeichnet. Je weiter rechts das Dreieck liegt, desto grösser ist das vertikale Offset seines Schattens.

Schatten - shadowOffsetY

shadowOffsetY

value - Fliesskommawert

Schematische Darstellung

Beispiel

Erläuterung

Anzeige