Beispiel
Clip aus einem rechteckigen Bereich von 200*120 Pixel von der Leinwand. Dann wird ein rotes Rechteck zeichnen. Nur der Teil des roten Rechtecks, das innerhalb des geschorenen Bereichs 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 in vollem Umfang unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| clip() | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Die clip() Methode Clips eine Region von jeder Form und Größe von der ursprünglichen Leinwand.
Tipp: Sobald eine Region abgeschnitten wird, werden alle zukünftigen Zeichnung wird auf die geschorene Bereich (kein Zugang zu anderen Regionen auf der Leinwand) begrenzt werden.Sie können jedoch die aktuelle Leinwand Region speichern Sie die Verwendung von save() -Methode vor der Verwendung von clip() Methode, und es wieder (mit der restore() Methode) jederzeit in der Zukunft.
| JavaScript-Syntax: | context.clip(); |
|---|