HTML Canvas clip() Methode
Definition und Verwendung
clip() Die Methode schneidet beliebige Formen und Größen aus dem Originalbildschirm aus.
Hinweis:Sobald ein Bereich geschnitten wurde, werden alle nachfolgenden Zeichnungen auf den geschnittenen Bereich beschränkt (es können keine anderen Bereiche der Leinwand erreicht werden). Sie können auch die aktuelle Leinwandregion speichern, indem Sie vor dem clip() -Methodenaufruf die save() -Methode verwenden, und sie zu einem späteren Zeitpunkt wiederherstellen (durch das restore() -Verfahren).
Beispiel
Schneiden Sie einen 200*120 Pixel großen Rechteckbereich von der Leinwand aus. Zeichnen Sie dann einen grünen Rechteck. Nur der grüne Rechteckbereich im geschnittenen Bereich ist sichtbar:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Schneide den Rechteckbereich aus
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Zeichne einen grünen Rechteck nach clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Syntax
context.clip();
Browser-Unterstützung
Die in der Tabelle genannten Zahlen geben die erste Browserversion an, die diese Eigenschaft vollständig unterstützt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
