In diesem Artikel wird hauptsächlich ein Tutorial zur Verwendung von Leinwand in HTML5 vorgestellt, um Partikelbewegungen mit Formeln zu zeichnen, und erfordert JavaScript -Code als Formel. Freunde, die es brauchen, können sich darauf beziehen
Vor kurzem möchte ich eine Webseite erstellen und einige der Demos, die ich im Prozess des Erlernens von HTML5 durchgeführt habe, um Sammlungen zu erstellen. Wenn ich jedoch nur eine Webseite erstelle und alle Demos einzeln ordne, wird sie sich zu hässlich anfühlen. Ich dachte nur, seit ich Leinwand gelernt habe, lass uns mit dem Browser herumspielen und eine kleine Eröffnungsanimation machen.
Ich dachte eine Weile über die Wirkung der Eröffnungsanimation nach und beschloss, Partikel zu verwenden, weil ich dachte, dass Partikel mehr Spaß machten. Ich erinnere mich noch an den ersten technischen Blog-Beitrag, den ich zuvor geschrieben habe, in dem ich mich mit partikelartigen Textbildern befasste: Partikelartige Textbilder, und dann habe ich nur lineare Bewegungen durchgeführt und einen kleinen 3D-Effekt hinzugefügt. Die Bewegungsformel ist einfach. Daher möchte ich diese Eröffnungsanimation nur dynamischer machen.
Gehen Sie zuerst zu Demo: http://2.axescanvas.sinaapp.com/demohome/index.html
Ist der Effekt dynamischer als gerade Linienbewegung? Und es ist in der Tat sehr einfach. Vergessen Sie nicht den Titel dieses Blog -Beitrags, der kleinen Formel und dem großen Spaß. Um einen solchen Effekt zu erzielen, verwenden wir nur die Junior High School. . Oder das physikalische Wissen in der High School, die Formel zum Beschleunigen der Bewegung und der Verlauf der Bewegung. Es ist also in der Tat eine kleine Formel. Das Plakat spielt gerne mit einigen coolen Dingen. Obwohl es bei der Arbeit möglicherweise nicht nützlich ist, ist dieser Spaß wirklich faszinierend. Darüber hinaus kann dies auch Ihre Programmierkenntnisse verbessern.
Ohne weiteres gehe ich zum Thema. Erklären Sie einfach kurz das Prinzip ~~~
Der Kerncode der Partikelbewegung ist genau das folgende:
XML/HTML -Code -Inhalt in die Zwischenablage kopieren