Ich möchte Canvas/WebGL-Technologien verwenden, um viele Hintergrundbilder mit voller Breite/Höhe mit benutzerdefinierten Formen zu schneiden/maskieren.
Hier sind die Funktionen, die ich suche:
Ich habe einige berühmte Bibliotheken für Leinwand gefunden wie:
Anwendungsbeispiel: Eine feste Leinwand hinter dem Website-Inhalt, mit Titelbild (volle Breite und Höhe), das in zwei Abschnitte maskiert ist, die animiert werden und das Titelbild zeigen, wenn der Benutzer scrollt.
Was ich versucht habe: Ich habe kinetic.js verwendet, aber es ist sehr schlecht mit Clipping-/Maskierungsfunktionen -- Am Anfang sah es nach der richtigen Wahl für 2D-Steuerelemente aus, aber ich habe das Gefühl, dass meine ganze Zeit damit verschwendet wurde, wie es ist eine sehr schlechte Unterstützung für die Verwendung benutzerdefinierter Formen zum Überschneiden von Bildern.
Mein spezielles Szenario: Ich erstelle eine Parallax-Site mit dem ScrollMagic & Greensock- Plugin. Ich habe 7 ~ 8 Abschnitte mit jeweils einem eigenen Hintergrundbild, das mit SVG auf ausgefallene Weise animiert wird - aber SVG ist sehr leistungsschwach und ich möchte es mit einer Leinwand tauschen - ich habe das bereits mit kinetic.js gemacht, aber Es bietet keine gute Unterstützung für das Zuschneiden benutzerdefinierter Formen auf Bildern für Animationen.
Jeder Vorschlag wäre sehr willkommen.
CreateJS wäre eine umfassende Wahl. Es bietet folgende Tools: