Metodo clip() del canvas

Manuale di riferimento Canvas

Definizione e uso

clip() Il metodo taglia 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 ad 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 successivo (attraverso il metodo restore()).

Esempio

Taglia un'area rettangolare di 200x120 pixel dal canvas. Poi, disegna un rettangolo verde. Solo la parte del rettangolo verde all'interno dell'area tagliata è visibile:

Il tuo browser non supporta il tag canvas HTML5.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Regione rettangolare di taglio
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Dopo clip() disegna un rettangolo verde
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

Prova a farlo tu stesso

Sintassi

context.clip();

Supporto 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>.

Manuale di riferimento Canvas