Beispiel
Clip aus einem rechteckigen Bereich von 200 * 120 Pixeln von der Leinwand. Dann wird ein rotes Rechteck zeichnen. Nur der Teil des roten Rechtecks, das in dem gekappten Bereich 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);
</script> Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| clip() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die clip() Methode Clips eine Region von beliebiger Form und Größe aus dem Original Leinwand.
Tip: Sobald eine Region abgeschnitten wird, wird all zukünftige Zeichnung wird auf den geschorenen Bereich begrenzt sein (no access to other regions on the canvas) . Sie können jedoch die aktuelle Leinwand Region speichern Sie die Verwendung von save() -Methode vor der Verwendung von clip() Methode, und es wieder (with the restore() Methode) jederzeit in der Zukunft.
| JavaScript-Syntax: | context . clip() ; |
|---|
<Canvas Object