RISOLTO Trasparenze In Javascript - Html Canvas

Pubblicità
Stato
Discussione chiusa ad ulteriori risposte.

fabio_1

Utente Attivo
Messaggi
244
Reazioni
8
Punteggio
43
Non sono molto esperto quindi chiedo il vostro aiuto su una questione. Forse commetto qualche errore banale.
Ho una figura semplice, diciamo una circonferenza per semplicità da disegnare su un canvas.
Visto che ci sono parti curve ho deciso di migliorare la qualità usando l'antialiasing.

Ciò che vorrei fare è permettere di colorare il cerchio racchiuso dalla circonferenza. Per fare ciò ho colorato di bianco tutta la parte esterna alla circonferenza e quando l'utente clicca su un colore disegno un rettangolo grande quanto il canvas sotto (ctx.globalCompositeOperation="destination-over") alla figura contenente la circonferenza (e il bianco). In tale modo la parte fuori resta bianca mentre quella dentro si colora come voluto.
Il problema è che l'antialiasing crea delle trasparenze e quindi il colore sborda fuori e si sovvrappone al nero semitrasparente della circonferenza (o meglio: lo vedo in trasparenza).

Per di più se rendessi queste parti non trasparenti, ammesso di potere, temo che avrei il problema contrario, ovvero il colore non riempirebbe completamente il cerchio...

Come posso risolvere?
 
Ok, ho risolto!
Devo applicare il bianco mentre faccio l'antialiasing così il bordo all'esterno sarà metà nero e metà bianco, ma tutto opaco e non si vedrà il colore che metterò sotto mentre all'interno sarà metà nero e metà trasparente e si vedrà il colore sfumato.
 
Stato
Discussione chiusa ad ulteriori risposte.
Pubblicità
Pubblicità
Indietro
Top