lienzo html: recorte y texto

Question

Estoy trabajando en una aplicación de pintura con lienzo, y quiero que el usuario tenga la opción de dibujar solo en un área seleccionada. para eso puedo usar el método clip(). pero si quiero que el usuario también pueda dibujar dentro de las cartas, ¿hay alguna forma de usar clip() para el texto? ¿hay alguna otra forma en que pueda hacerlo?

gracias

Answer 1

Usted puede hacer esto, pero no con el sujetador. El clip solo funciona con rutas y el texto no es una ruta.

Deberá usar un segundo lienzo en la memoria (no en la página) para lograr el efecto. Aquí es cómo:

1. Hacer un lienzo en memoria, se establece en un ancho y la altura capaz de contener el texto
2. dibujar el texto a la lona
3. en memoria fijar los residentes en memoria de contexto de globalCompositeOperation en 'fuente-in'
4. Dibujar lo que desea recortado al texto
5. uso drawImage(in-memory-canvas, x, y) para poner el efecto de nueva creación en el lienzo normal de