HTML canvas clip() metod

HTML5 Canvas-referenshandbok

Definition och användning

clip() Metoden klipper ut valfritt former och storlekar från den ursprungliga canvasen.

Tips:När ett område har klippts ut, begränsas all efterföljande ritning till det klippta området (kan inte komma åt andra områden på canvasen). Du kan också spara den aktuella canvasområdet innan du använder clip() -metoden genom att använda save() -metoden och återställa det vid ett senare tillfälle (genom att använda restore() -metoden).

Exempel

Klipp ut ett rektangulärt område på 200*120 pixlar från canvas. Därefter, rita en grön rektangel. Endast den gröna rektangelns del inom det klippta området är synlig:

Din webbläsare stöder inte HTML5 canvas-taggen.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Skär rektangulärt område
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Rita en grön rektangel efter clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

Prova själv

Syntaks

context.clip();

Webbläsarstöd

Numrerna i tabellen anger den första webbläsarversionen som helt stöder denna egenskap.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.

HTML5 Canvas-referenshandbok