Quiero usar las tecnologías Canvas/WebGL para crear muchas imágenes de fondo de ancho/alto completo con recorte/enmascaramiento de formas personalizadas.
Aquí están las características que estoy buscando:
He encontrado algunas bibliotecas famosas para lienzos como:
Ejemplo de uso: un lienzo fijo detrás del contenido del sitio web, con una imagen de portada (ancho y alto completos) enmascarada en dos secciones que animan y revelan la imagen de portada a medida que los usuarios se desplazan.
Lo que he intentado: he usado kinetic.js pero es muy pobre con las funciones de recorte/enmascaramiento. Al principio, parecía la opción correcta para los controles 2D, pero siento que he perdido todo mi tiempo en esto, ya que lo ha hecho. un soporte muy pobre para usar formas personalizadas para recortar imágenes.
Mi escenario particular: estoy creando un sitio de paralaje usando el complemento ScrollMagic y Greensock . Tengo 7 ~ 8 secciones, cada una con su propia imagen de fondo que se anima de una manera elegante usando svg, pero svg tiene un rendimiento muy bajo y quiero cambiarlo con un lienzo. Ya lo hice usando kinetic.js, pero no proporciona ningún buen soporte para recortar formas personalizadas en imágenes para animación.
Cualquier sugerencia sería muy apreciada.
CreateJS sería una opción integral. Ofrece las siguientes herramientas: