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.

Schatten - shadowBlur

shadowBlur

value - Fliesskommawert

Schematische Darstellung

Beispiel

Erläuterung

Anzeige