Dokumentation (canvas.quaese.de)
 

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.

clip()

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.

Anzeige

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