Canvas clip() methode
Definitie en gebruik
clip() De methode snijdt een willekeurige vorm en maat van het oorspronkelijke canvas af.
Tip:Zodra een gebied is gesneden, worden alle latere tekeningen beperkt tot het gesneden gebied (kan geen andere gebieden op het canvas bereiken). U kunt ook de huidige canvas-ruimte opslaan voordat u de clip() methode gebruikt met de save() methode en deze later op elk moment herstellen (via de restore() methode).
Voorbeeld
Snijd een rechthoek van 200*120 pixels van het canvas af. Teken vervolgens een groene rechthoek. Alleen het groene deel van de rechthoek binnen het gesneden gebied is zichtbaar:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Snijd de rechthoekige gebied af
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Na het clippen tekenen van een groene rechthoek
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Syntax
context.clip();
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
