html canvas: clipping e text

Question

Sto lavorando a un'app paint con canvas, e desidero consentire all'utente di disegnare solo in un'area selezionata. per quello posso usare il metodo clip(). ma se voglio che l'utente sia in grado di disegnare anche all'interno delle lettere - c'è un modo per usare clip() per il testo? c'è un altro modo per farlo?

grazie

Answer 1

È possibile farlo, ma non utilizzando clip. Clip funziona solo con i percorsi e il testo non è un percorso.

Per ottenere l'effetto è necessario utilizzare una seconda area di memoria in memoria (non sulla pagina). Ecco come:

1. Fai una tela in-memory, impostarlo su un larghezza e l'altezza in grado di contenere il testo
2. disegnare il testo di quella tela
3. in memoria impostare i in memoria contesto di globalCompositeOperation a 'fonte-in'
4. Disegnare la cosa che si desidera troncato per il testo
5. uso drawImage(in-memory-canvas, x, y) di mettere l'effetto appena creata sul vostro tela normale