Wie erstelle ich einen gebogenen Gradienten?
Ich programmiere Schlange mit Javascript. Für den Hintergrund der verschiedenen Körperteile verwende ich die folgende Gradientengenerierung:
%Vor%Mein Problem ist, dass wenn die Schlange sich bewegt und die Richtung ändert, der Gradient gebogen werden muss, um in den letzten Körperteil zu passen, bevor die Ecke endet und der letzte, der der Schlange folgt.
Zum Beispiel:
Ich verwende 10x10 px div Elemente
Jetzt brauche ich den Übergang, wenn es eine Ecke bewegt
Hat jemand eine Idee?
1 Antwort
Ich habe mir die Zeit genommen, ein paar nützliche JavaScript-Funktionen zu schreiben, die Sie vielleicht nützlich finden. Sie erfordern jedoch die Verwendung der jQuery-Bibliothek. Die beste Methode zum Erstellen von Biegegradienten ist die Verwendung von Offset-Radialgradienten. Dies in Kombination mit dem Randradius sorgt für einen wirklich schönen Effekt.
Jetzt liegt es an dir,
- Verwenden Sie die richtige Funktion zu den richtigen Zeiten (die Namenskonvention von Die Funktionen sind sideA_To_sideB, also RightToUp bedeutet, nach rechts zu gehen Irgendwann finden wir SideA und gehen nach oben, finden schließlich SideB - Seiten sei der Kopf oder der Schwanz)
- Machen Sie es über den Browser (wenn Sie in dieser Art von Sache sind)
- das Verrunden von Kopf und Schwanz wäre eine nette Geste (im Idealfall würde diese Rundung nur auf vertikale und horizontale Teile)
Fühlen Sie sich frei, die Größenvariable an Ihre Bedürfnisse anzupassen.
BEARBEITEN - basierend auf dem Bild, das du gerade hinzugefügt hast, habe ich Folgendes erstellt: jsfiddle Ссылка . Dies wurde unter Verwendung rotierter linearer Gradienten durchgeführt. Ich denke immer noch, dass meine ursprüngliche Herangehensweise besser aussieht und mehr Sinn macht. Dies sollte jedoch ausreichen, um Sie in die richtige Richtung zu schicken. Der Pseudocode kann weiterhin für diesen neuen Code verwendet werden.
Auch hier ist ein Pseudocode, der Ihnen hilft, die entsprechenden Funktionen aufzurufen
%Vor%Tags und Links javascript css html5