HTML canvas clip() metode
Definition og brug
clip() Metoden skærer enhver form og størrelse fra det oprindelige canvas.
Tip:Når et område er skåret, vil alle efterfølgende tegninger blive begrænset 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ær område fra canvas. Derefter, tegn en grøn rektangel. Kun den grønne rektangulære del inden for den skårne området er synlig:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Skærer rektangulært område
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Tegner en grøn rektangel efter clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Syntax
context.clip();
Browser Support
Tal 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.
