Pfad-Schnittstelle - clip()
Mit der Methode clip wird eine Maske (Clipping-Pfad) erstellt. Nur was innerhalb
dieser Maske liegt wird angezeigt. Um dieses Verhalten zu erreichen, wird intern die Schnittmenge
von Arbeitspfad und Clipping-Pfad gebildet.
Wird clip aufgerufen, wird der aktuelle Arbeitspfad zum Clipping-Pfad. Ab jetzt wird nur
noch angezeigt, was sich in der Schnittmenge mit der Zeichenfläche befindet.
Wird der canvas erstellt, hat der Clipping-Pfad seinen Ursprung bei (0, 0) und ist so
breit und hoch wie der Zeichenbereich.
IE (ExplorerCanvas)
Die IE-Erweiterung ExplorerCanvas unterstützt dieses Feature nicht.
Clipping-Pfad
Ein Clipping-Pfad verhält sich wie ein normaler Pfad. Allerdings wirkt er wie eine Maske, mit deren Hilfe alles ausgeblendet wird, was ausserhalb liegt. Was innerhalb liegt, wird angzeigt (siehe Abbildung).
Wird ein restore ausgeführt, so wird auch der Clipping-Pfad zurückgesetzt.
clip
void clip()
Die Methode erwartet keine Parameter.
Schematische Darstellung
Die nachfolgende Abbildung zeigt die Wirkungsweise von clip. Angezeigt wird nur der Teil,
der sich im Clipping-Pfad (stehendes Quadrat) befindet. Die angedeutete Weiterführung des Bildes ausserhalb des Pfades
dient nur der Anschaulichkeit. Tatsächlich wären diese Bereiche nicht mehr sichtbar.
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');
// Transformationen
objContext.translate(100, 100);
objContext.rotate(Math.PI/4);
// Pfad erstellen und als Clipping-Pfad anwenden
objContext.beginPath();
objContext.rect(-50, -50, 100, 100);
objContext.strokeStyle = "#a00";
objContext.stroke();
objContext.clip();
// Transformationen rückgängig machen
objContext.rotate(-Math.PI/4);
objContext.translate(-100, -100);
objContext.drawImage(objImg, 20, 65);
}else{
// Sonstiger Code
}
}
Erläuterung
Zuerst werden Transformationen dahingehend durchgeführt, dass ein Quadrat erstellt werden kann,
das auf einer Spitze steht. Nachdem der Pfad für das Quadrat erstellt wurde, wird er durch die
Methode clip zum Clipping-Pfad. Nachdem die Transformationen wieder rückgängig
gemacht wurden, wird ein Bild gezeichnet, von dem nur ein Teil im Clipping-Pfad sichtbar ist.