Canvas clip() metoden
Definition og brug
clip() Metoden skærer hvilken som helst form og størrelse fra original canvas.
Tip:Når et område er skåret, begrænses al efterfølgende tegning til det skårne område (kan ikke få adgang til andre områder på canvas). Du kan også gemme den nuværende canvas-området ved at bruge save() metoden, og gendanne det senere på et hvilket som helst tidspunkt (ved at bruge restore() metoden).
Eksempel
Skær 200*120 pixels rektangulært område fra canvas. Tegn derefter grøn rettangulær. Kun den del af den grønne rettangulære, der er inden for det skårne område, er synlig:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Skærer rektangulær område
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Efter clip() tegner grøn rettangulær
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Syntaks
context.clip();
Browserstøtte
Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.
