Dokumentation (canvas.quaese.de)

Verknüpfungen - globalAlpha

Mit dem Attribut globalAlpha kann ein globaler Transparenzwert im Bereich von 0.0 (volle Transparenz) bis einschließlich 1.0 (keine Transparenz) definiert werden. Dieser wird auf Formen und Bilder angewendet, bevor sie in das HTMLCanvasElement gezeichnet werden.

Wird versucht, einen Wert ausserhalb des gültigen Bereichs zuzuweisen, so behält das Attribut seinen bisherigen Wert.

Initialwert ist 1.0.

globalAlpha

globalAlpha = value

value - Wert von 0.0 (volle Transparenz) bis einschliesslich 1.0 (keine Transparenz)

Schematische Darstellung

Die Abbildung zeigt zwei unterschiedliche globale Alphaeinstellungen.

globalAlpha

Beispiel

var objImg = new Image();

// IE
if(document.all && !window.opera)
  window.onload = function(){ drawIt();};
// Sonstige
else
  objImg.onload = function(){ drawIt();}

objImg.src = "bild.gif";

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

    var objPattern = objContext.createPattern(objImg, "repeat");

    // Falls es sich NICHT um einen IE handelt
    if(!(document.all && !window.opera))
      // Füllmethode mit Patternobjekt auszeichnen
      objContext.fillStyle = objPattern;

    // Rechteck zeichnen
    objContext.fillRect(0, 0, parseInt(objCanvas.width), parseInt(objCanvas.height))

    objContext.translate(20, 0);

    // Drei Formen ohne Transparenz zeichnen
    drawRectangle(objContext, "#ff0");
    drawTriangle(objContext, "#f33");
    drawEllipse(objContext, "#30f");

    // Ursprung vertikal verschieben
    objContext.translate(0, 70);
    // Transparenz auf 40 Prozent setzen
    objContext.globalAlpha = 0.4;

    // Drei Formen mit Transparenz zeichnen
    drawRectangle(objContext, "#ff0");
    drawTriangle(objContext, "#f33");
    drawEllipse(objContext, "#30f");
  }else{
    // Sonstiger Code
  }
}

// Funktion zum Zeichnen eines Quadrats
function drawRectangle(objContext, strCol){
  objContext.beginPath();
  objContext.rect(10, 10, 50, 50);
  objContext.fillStyle = strCol;
  objContext.fill();
}

// Funktion zum Zeichnen eines Dreiecks
function drawTriangle(objContext, strCol){
  objContext.beginPath();
  objContext.moveTo(105, 10);
  objContext.lineTo(130, 60);
  objContext.lineTo(80, 60);
  objContext.lineTo(105, 10)
  objContext.fillStyle = strCol;
  objContext.fill();
}

// Funktion zum Zeichnen eines Kreises
function drawEllipse(objContext, strCol){
  objContext.beginPath();
  objContext.moveTo(200, 35);
  objContext.arc(175, 35, 25, 0, 2*Math.PI, true);
  objContext.fillStyle = strCol;
  objContext.fill();
}

Erläuterung

Zunächst wird der canvas mit einem Muster gefüllt (siehe createPattern). Im nächsten Schritt werden drei Formen ohne Transparenz gezeichnet. Danach wird der globale Transparenzwert mit globalAlpha auf 40 Prozent gesetzt. Im Anschluss werden die gleichen Formen nochmals mit Transparenz und vertikaler Verschiebung gezeichnet.

Verknüpfungen - globalAlpha

globalAlpha

value - Wert von 0.0 (volle Transparenz) bis einschliesslich 1.0 (keine Transparenz)

Schematische Darstellung

Beispiel

Erläuterung

Anzeige