Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 16, 2021 03:51 pm GMT

Creare una maschera di ritaglio con canvas

Vediamo come creare una maschera di ritaglio con il canvas.
Ma cos' una maschera di ritaglio?

Per capire di cosa si tratta facciamo un esempio e prendiamo due elementi, un immagine di un tramonto e una scritta e li mettiamo uno sopra l'altro. Vedremo una scritta soprapposta ad una foto.

Alt Text

Ma noi vogliamo che il testo diventi una maschera di ritaglio, nascondendo tutto quello che si trova subito sotto tranne la scritta stessa che mostrer la parte sottostante come se fosse ritagliata, per l'appunto.

Alt Text

Adesso che abbiamo capito vediamo come applicarla nel canvas.
Ci sono due modi per applicare il ritaglio, vediamo le differenze.

Iniziamo preparando le parti in comune per tutti e due i modi, inizializziando il canvas e carichicando un immagine.

var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");canvas.width = 600;canvas.height = 600;let img = new Image();img.src = 'https://source.unsplash.com/GPPAjJicemU/600x600';img.addEventListener('load', () => {  ctx.drawImage(img, canvas.width, canvas.height);})

Clip

Il primo modo per "ritagliare" il metodo clip().

Questa tecnica utilizzata quando vogliamo creare una maschera di ritaglio a partire da una figura geometrica.

Le figure geometriche si creano in vario modo, ma sono quasi tutte accomunate dal fatto che per visualizzarle a video bisogno usare il metodo fill() o stroke().
Per fare far diventare una maschera di ritaglio una figura bisogna usare il metodi clip(), al posto dei metodi di visualizzazione a video.

Naturmalmente quelli che non sono soggetti a questi metodi non possono essere usati come maschera di ritaglio con clip() e sono:

...let img = new Image();img.src = 'https://source.unsplash.com/GPPAjJicemU/600x600';img.addEventListener('load', () => {  ctx.rect(200, 150, 200, 200);  ctx.arc(300, 100, 50, 0, 2 * Math.PI);  ctx.clip();  ctx.drawImage(img, 0, 0);})

In questo esempio abbiamo creato due figure: un cerchio e un quadrato che andreanno a visualizzare il contenuto sotto stante l'immagine con il metodo clip().

globalCompositeOperation

Un secondo metodo sfruttare la propriet del context: globalCompositeOperation, questa definisce come due elementi si debbano sovrapporre.

Ci sono tanti modi con effetti diversi per sovrapporre due elementi e che vedremo in un post dedicato, in questo caso utilizzeremo solo quello che fa al caso nostro.

ctx.globalCompositeOperation = 'destination-atop';

Ma vediamo all'opera

img.addEventListener('load', () => {  ctx.drawImage(img, 0, 0);  ctx.globalCompositeOperation = 'destination-atop';  ctx.font = 'bold 132px sans-serif';  ctx.fillText('SUNRISE', 10, 150)})

In questo caso l'elemento sottostante il globalCompositeOperation diventer la maschera di ritaglio dell'immagine sovrastante.

Come vedrete dal codice questo metodo non ha pi il vincolo delle forme, ma si pu usare con qualsiasi elemento grafico, come nel nostro caso, il testo.

Conclusione

I due metodi sono molto simili. A mio parere quando si deve fare una maschera con delle figure geometriche sempre meglio usare il metodo clip(). Perch pi veloce e da meno problemi di implementazione.
Mentre userei globalCompositeOperation quando si vuole fare una maschera con il testo.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.


Original Link: https://dev.to/camizzilla/creare-una-maschera-di-ritaglio-con-canvas-2lkk

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To