Canvas clip() Methode

Canvas-Referenzhandbuch

Definition und Verwendung

clip() Die Methode schneidet beliebige Formen und Größen aus dem ursprünglichen Bildschirm aus.

Hinweis:Wenn ein Bereich ausgeschnitten wird, werden alle nachfolgenden Zeichnungen auf den ausgeschnittenen Bereich beschränkt (andere Bereiche des Bildschirms können nicht erreicht werden). Sie können auch den aktuellen Bildschirmbereich vor dem clip() Methodenaufruf mit save() sichern und ihn jederzeit wiederherstellen (durch restore() Methodenaufruf).

Beispiel

Ein 200*120 Pixel großes Rechteckbereich wird aus dem Bildschirm ausgeschnitten. Anschließend wird ein grüner Rechteck gezeichnet. Nur der grüne Rechteckbereich im ausgeschnittenen Bereich ist sichtbar:

Ihr Browser unterstützt das HTML5 Canvas-Tag nicht.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Der Rechteckbereich wird ausgeschnitten
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Nach clip() wird ein grüner Rechteck gezeichnet
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

Probieren Sie es selbst aus

Syntax

context.clip();

Browser-Unterstützung

Die in der Tabelle genannten Zahlen geben die erste Version des Browsers 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.

Canvas-Referenzhandbuch