HTML canvas clip() Methode
Voorbeeld
Clip van een rechthoekig gebied van 200*120 pixels van het canvas. Teken vervolgens een rode rechthoek. Alleen het deel van de rode rechthoek dat zich binnen het bijgesneden gebied bevindt, is zichtbaar:
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);
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.
| Method | |||||
|---|---|---|---|---|---|
| clip() | Yes | 9.0 | Yes | Yes | Yes |
Definitie en gebruik
De methode clip() knipt een gebied van elke vorm en grootte van het originele canvas.
Tip: Zodra een regio is bijgesneden, zijn alle toekomstige tekeningen beperkt tot de bijgesneden regio (geen toegang tot andere regio's op het canvas). U kunt het huidige canvasgebied echter opslaan met de methode save() voordat u de methode clip() gebruikt, en het op elk gewenst moment in de toekomst herstellen (met de methode restore()).
| JavaScript-syntaxis: | context .clip(); |
|---|
❮ HTML Canvas-referentie