HTML canvas clip() method
Definition and Usage
clip() The method cuts any shape and size from the original canvas.
Tip:Once an area has been cut, all subsequent drawings will be restricted to the cut area (cannot access other areas on the canvas). You can also save the current canvas area before using the clip() method using the save() method and restore it at any later time (using the restore() method).
Example
Cut a 200*120 pixel rectangle area from the canvas. Then, draw a green rectangle. Only the green rectangle part within the cut area is visible:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Leikkaa suorakulmainen alue
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Piirretään vihreä suorakulmio clip() jälkeen
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Syntaksi
context.clip();
Selaimen tuki
Taulukossa olevat numerot mainitsevat ensimmäisen täysin tukevan selaimen version.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Huomautus：Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> -elementtiä.
