Verknüpfungen - globalCompositeOperation
Das Attribut globalCompositeOperation legt fest, wie neu erstellte Formen und Bilder
mit zuvor erstellten Elementen kombiniert werden.
In der Standardeinstellung werden neue Elemente über (= eine Ebene höher) dem bishrigen Inhalt angeordnet. Alles, was sich unter dem neuen Element befindet, wird verdeckt.
Initialwert ist source-over.
IE (ExplorerCanvas)
Die IE-Erweiterung ExplorerCanvas zeigt Kombinationen/Verknüpfungen nicht korrekt an
(Demonstation).
globalCompositeOperation
globalCompositeOperation = type
Dem Attribut wird ein String zugewiesen, der den gewünschten Typ beschreibt. Die Zeichenkette ist case-sensitive, es wird also zwischen Gross- und Kleinschreibung unterschieden.
Im Folgenden werden die zur Verfügung stehenden Typen beschrieben. Der grüne Kreis ist jeweils das Element, das zuerst gezeichnet wurde.
source-over
source-over ist der Standardwert. Jedes neue Element wird über dem bereits existierenden
Canvasinhalt angeordnet.
source-atop
Das neue Element wird nur dort gezeichnet, wo es mit dem existierenden Canvasinhalt überlappt. Der restliche bereits existende Inhalt wird unverändert gezeichnet.
source-in
Das neue Element wird nur dort gezeichnet, wo es mit dem existierenden Canvasinhalt überlappt. Der Rest wird transparent.
Anzeigeprobleme: Safari 3.0 beta (Win)
source-out
Das neue Element wird ohne den existierenden Canvasinhalt gezeichnet.
Anzeigeprobleme: Safari 3.0 beta (Win)
destination-atop
Der existierenden Canvasinhalt wird nur dort gezeichnet, wo er mit dem neuen Element überlappt. Der restliche neue Inhalt wird unverändert gezeichnet.
destination-in
Der existierenden Canvasinhalt wird nur dort gezeichnet, wo er mit dem neuen Element überlappt. Der Rest wird transparent.
Anzeigeprobleme: Safari 3.0 beta (Win)
destination-out
Der existierende Canvasinhalt wird ohne das neue Element gezeichnet.
destination-over
Jedes neue Element wird hinter dem bereits existierenden Canvasinhalt angeordnet.
copy
Gezeichnet wird lediglich das neue Element. Der Rest wird entfernt.
Anzeigeprobleme: Browser mit Gecko-Engine 1.8, Safari 3.0 beta (Win)
darker
Der Schnittbereich des neuen Elements mit dem bereits existenten Canvasinhalt wird abgedunkelt, indem die Farbwerte subtrahiert werden.
Anzeigeprobleme: Browser mit Gecko-Engine 1.8
lighter
Der Schnittbereich des neuen Elements mit dem bereits existenten Canvasinhalt wird aufgehellt, indem die Farbwerte addiert werden.
xor
Bereiche, die in der Schnittmenge von neuen Element und bestehendem Canvasinhalt liegen, werden transparent. Der restliche Bereich wird gezeichnet.
Beispiel
// Breite und Höhe eines Canvas-Elements
var intDim = 120;
function drawIt(){
var objCanvas = document.createElement("canvas");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Typenarray
var arrTypes = new Array(["source-over", "source-atop", "source-in", "source-out"],
["destination-atop", "destination-in", "destination-out", "destination-over"],
["copy", "darker", "lighter", "xor"]);
// Typenarray durchlaufen
for(var i=0; i<arrTypes.length; i++){
// Alle Typen in einer Zeile durchlaufen
for(var j=0; j<arrTypes[i].length; j++){
// Canvaselement erstellen und Grösse anpassen
objCanvas = document.createElement("canvas");
objCanvas.width = intDim;
objCanvas.height = intDim;
objCanvas.style.width = intDim + "px";
objCanvas.style.height = intDim + "px";
// Kontext
var objContext = objCanvas.getContext('2d');
// Kreis zeichnen
drawEllipse(objContext, "#0c0");
// Verknüpfungstyp zuweien
objContext.globalCompositeOperation = arrTypes[i][j];
// Dreieck zeichnen
drawTriangle(objContext, "#30f");
// Beschriftungselement erstellen, formatieren und beschriften
var objLabel = document.createElement("div");
objLabel.style.position = "absolute";
objLabel.style.zIndex = 99;
objLabel.style.top = ((i+1)*intDim - 30) + "px";
objLabel.style.left = (j*intDim) + "px";
objLabel.style.width = intDim + "px";
objLabel.style.textAlign = "center";
objLabel.style.lineHeight = "150%";
objLabel.style.backgroundColor = "#999";
objLabel.innerHTML = arrTypes[i][j];
// Canvas und Label in DOM einhängen
document.getElementById("canvasContainer").appendChild(objCanvas);
document.getElementById("canvasContainer").appendChild(objLabel);
}
// Zeilenumbruch
document.getElementById("canvasContainer").appendChild(document.createElement("br"));
}
}else{
// Sonstiger Code
document.getElementById("canvasContainer").innerHTML = "Ihr Browser unterstützt das canvas-Element leider nicht.";
}
}
function drawTriangle(objContext, strCol){
// Höhe des Dreiecks (Grundseite = Höhe)
var intHoehe = 50;
objContext.beginPath();
objContext.moveTo(parseInt(intDim/2), 10);
objContext.lineTo(parseInt(intDim/2) + parseInt(intHoehe/2), 10 + intHoehe);
objContext.lineTo(parseInt(intDim/2) - parseInt(intHoehe/2), 10 + intHoehe);
objContext.lineTo(parseInt(intDim/2), 10)
objContext.fillStyle = strCol;
objContext.fill();
}
function drawEllipse(objContext, strCol){
// Radius des Kreises
var intRadius = 25;
objContext.beginPath();
objContext.moveTo(parseInt(intDim/2) + intRadius, 15 + intRadius);
//objContext.arc(35, 40, 25, 0, 2*Math.PI, true);
objContext.arc(parseInt(intDim/2), 15 + intRadius, intRadius, 0, 2*Math.PI, true);
objContext.fillStyle = strCol;
objContext.fill();
}
Erläuterung
Im Beispiel wird für jeden Verknüpfungstyp ein eigenes Canvaselement erstellt. Die Typen selbst werden in einem Array verwaltet, das in zwei for-Schleifen komponentenweise durchlaufen wird. Dabei wird für jeden Typ ein eigenes Canvaselement erstellt, in dem die aktuelle Verknüpfung zwischen einem Kreis und einem Dreieck optisch dargestellt wird.
Zudem wird jeweil ein Beschriftungsfeld mit der Bezeichnung des Typs erstellt. Sind die beiden Elemente mit Inhalten gefüllt, werden sie in einen Container (canvasContainer) eingehängt.
Es ist zu beachten, dass das Script entweder nach dem Container mit der ID canvasContainer oder im onload-Event eingebunden wird, da die Existenz des Containers Voraussetzung für das Einhängen weiter Knoten ist.