Dokumentation (canvas.quaese.de)
 

Schatten - shadowBlur

Das Attribut shadowBlur legt die Grösse des Unschärfeeffekts am Rand des Schattens fest.

Initialwert von shadowBlur ist 0.

shadowBlur

shadowBlur = value

value - Fliesskommawert

Schematische Darstellung

Die folgende Abbildung zeigt die Position von shadowBlur.

shadowBlur

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 Blurwerten
    var arrBlur = new Array(0, 1, 2, 3, 4);

    // Schattenoffset
    objContext.shadowOffsetX = 10;
    objContext.shadowOffsetY = 5;

    // Schattenfarbe
    objContext.shadowColor = "rgba(32, 32, 32, 0.5)";

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

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

      // Schattenblur-Wert zuweisen
      objContext.shadowBlur = arrBlur[i];

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

Erläuterung

Im Beispiel werden fünf Dreiecke mit verschiedenen shadowBlur-Werten gezeichnet. Je weiter rechts sich ein Dreieck befindet, desto grösser der Blurwert und desto unschärfer der Rand des 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