Canvas clip() metod

Canvas-referenshandbok

Definition och användning

clip() Metoden skär från originalcanvas i valfri form och storlek.

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

Exempel

Skär från canvas 200*120 bildpunkter. Rita sedan en grön rektangel. Endast den gröna rektangelns del inom det skärda 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är område
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Efter clip() ritas en grön rektangel
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 detta 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.

Canvas-referenshandbok