HTML-Canvas -clip()- Methode
Beispiel
Ausschnitt eines rechteckigen Bereichs von 200 x 120 Pixeln aus der Leinwand. Zeichnen Sie dann ein rotes Rechteck. Nur der Teil des roten Rechtecks, der sich innerhalb des beschnittenen Bereichs befindet, ist sichtbar:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| clip() | Yes | 9.0 | Yes | Yes | Yes |
Definition und Verwendung
Die Methode clip() schneidet einen Bereich beliebiger Form und Größe von der Originalleinwand ab.
Tipp: Sobald ein Bereich beschnitten ist, sind alle zukünftigen Zeichnungen auf den beschnittenen Bereich beschränkt (kein Zugriff auf andere Bereiche auf der Leinwand). Sie können jedoch den aktuellen Canvas-Bereich mit der save()-Methode speichern, bevor Sie die clip()-Methode verwenden, und ihn jederzeit (mit der restore()-Methode) in der Zukunft wiederherstellen.
| JavaScript-Syntax: | Kontext .clip(); |
|---|
❮ HTML-Canvas-Referenz