Dokumentation (canvas.quaese.de)
 

Schatten - shadowOffsetX

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

Initialwert ist 0.

shadowOffsetX

shadowOffsetX = value

value - Fliesskommawert

Schematische Darstellung

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

shadowOffsetX

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.shadowOffsetY = 0;

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

    // Füllfarbe
    objContext.fillStyle = "#0f0";

    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.shadowOffsetX = 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 horizontale Offset seines Schattens.

Anzeige

Werden die Dreiecke ohne Schatten angezeigt, unterstützt ihr Browser keine Schatteneffekte.

Ihr Browser unterstützt das canvas-Element leider nicht.

 
Dokument zuletzt modifiziert: 05.02.2008, 14:28 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap