Metodo clip() del canvas HTML
Definizione e uso
clip() Il metodo taglia aree di qualsiasi forma e dimensione dal canvas originale.
Suggerimento:Una volta tagliata una certa area, tutte le successive operazioni di disegno saranno limitate all'area tagliata (non possono accedere alle altre aree del canvas). Puoi anche salvare l'area corrente del canvas prima di utilizzare il metodo clip() utilizzando il metodo save(), e ripristinarla in qualsiasi momento in futuro (attraverso il metodo restore()).
Esempio
Taglia un'area rettangolare di 200*120 pixel dal canvas. Poi, disegna un rettangolo verde. Solo la parte verde tagliata dell'area è visibile:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Area rettangolare di taglio
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Disegna un rettangolo verde dopo clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Sintassi
context.clip();
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta per la prima volta questa proprietà.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
