Anfänger

Two.js ist eine API, die es einfach macht, 2D -Formen mit Code zu erstellen. Folgen Sie mit und Sie werden lernen, wie Sie Formen aus JavaScript erstellen und animieren. Die Bibliothek verfügt über viele Methoden, mit denen man steuern kann, wie unterschiedliche Formen auf dem Bildschirm angezeigt werden oder wie sie animiert werden. Die Bibliothek hat eine Größe von rund 128 kb, während die komprimierte Version 50 kb beträgt. Wenn Sie die neueste Version verwenden, können Sie die Größe der Bibliothek mit einem benutzerdefinierten Build weiter reduzieren. Sobald Sie die Bibliothek Ihrer Webseite hinzugefügt haben, können Sie verschiedene Formen oder Objekte zeichnen und animieren. Sie können einige Parameter an die zwei.makeline (x1, y1, x2, y2)

übergeben. Hier zwei.Makerectangle (x, y, width, Höhe)

und zwei.makecircle (x, y, radius)

und zwei.makearrow (x1, y1, x2, y2, Größe)

Methode. Die Y1
• -Werte bestimmen die Position des Schwanzes des Pfeils. Die Y2
-Werte bestimmen die Position der Pfeilspitze. Der fünfte Parameter bestimmt die Größe der Pfeilspitze. Sie können entweder eine Liste verschiedener Objekte übergeben oder ein Array von Objekten, Pfaden oder Gruppen als Parameter für diese Methode übergeben. Es gibt auch eine FILL
• , Zeilenbreiten
-Werte gleichzeitig zurück. Wir werden tatsächlich die Position der Gruppe festlegen. Da die Rechtecke Teil der Gruppe sind, bewegen sie sich automatisch. Wenden Sie jeweils einen anderen Satz von Schlaganfall -Farbwerten an, um Ihr eigenes einzigartiges geometrisches Kunststück zu erstellen.

• Definieren von Gradienten und Schreiben von Text

  Sie können sowohl lineare als auch radiale Gradienten in zwei.js. Das Definieren eines Gradienten bedeutet nicht, dass er automatisch auf dem Bildschirm gerendert wird, aber es steht Ihnen zur Verfügung, wenn Sie die beiden einstellen. Die Werte neue zwei.stop (Offset, Farbe, Deckkraft) , wobei zwei.Makeradialgradient (x, y, Radius, Stopps, FX, FY) . In diesem Fall sind die Werte zwei. Aus dem Namen der Parameter ersichtlich, dass Nachricht der tatsächliche Text ist, den Sie schreiben möchten. Die Parameter x und y <code>message sind die Koordinaten des Punktes, die als Zentrum für das Schreiben des Textes fungieren. Der Parameter styles <code>x ist ein Objekt, mit dem die Werte einer großen Reihe von Eigenschaften festgelegt werden können. Sie können auch den Wert von Eigenschaften wie FILL <code>y, Stroke <code>styles, apazität

  , Rotation <p>, <code> skaliert <code>family und Übersetzung <code>size. In diesem Tutorial werde ich Ihnen zeigen, wie wir zwei.Js verwenden können, um die ersten zehn Elemente des Periodenzüchters mit Elektronen um den Kern zu rendern. Der Kern hat auch eine leichte Bewegung, um die visuelle Anziehungskraft unserer Darstellung zu verbessern. alignment fill Wir beginnen zunächst einige Variablen und Funktionen, die später verwendet werden. Diese werden später verwendet, um unser Atom in die Mitte zu platzieren. Das Array elementnames <code>stroke enthält die Namen der ersten zehn Elemente der Periodenzüchter. Der Index jedes Namens entspricht der Anzahl der Elektronen und Protonen dieses Elements und beginnt mit einer leeren Zeichenfolge. Das Objekt Styles <code>opacity enthält Eigenschaften zum Styling des Textobjekts. Die roten/schwarzen Radialgradienten repräsentieren Protonen, und blaue/schwarze Gradienten repräsentieren Neutronen. Die Methode makecircle () <code>rotation setzt auch den Radius dieser Protonen und Neutronen auf 10 Pixel. Danach iterieren wir über nucleusarray <code>scale und füllen jeden Kreis mit einem anderen Gradienten abwechselnd. translation

  var rects = [];<br><br>var elemWidth = document.querySelector("#draw-shapes").offsetWidth;<br><br>for (i = 0; i   rects[i] = two.makeRectangle(<br>    Math.floor(Math.random() * elemWidth * 2),<br>    Math.floor(Math.random() * 420 * 2),<br>    10 + Math.floor(Math.random() * 100),<br>    10 + Math.floor(Math.random() * 100)<br>  );<br>}<br><br>var group = two.makeGroup(...rects);<br><br>group.noFill();<br>group.stroke = "black";<br>group.linewidth = 6;<br><br>two.update();<br>

  Neutronen und Protonen in den Kern platzieren, war einfach. Das ordnungsgemäße Platzieren der Elektronen in einheitlicher Entfernung erfordert jedoch ein wenig Mathematik. Wir verwenden die shellRadius -Rearable, um den Abstand verschiedener Elektronenschalen aus dem Kern anzugeben. Ein ganzer Kreis deckt einen Winkel von 2 Pi -Radians ab. Wir können unterschiedliche Elektronen gleichmäßig aufbauen, indem wir die 2 PI -Radianer gleichermaßen zwischen ihnen verteilen. Es wird auch die Füllfarben für alle Elektronen in einer bestimmten Umlaufbahn gleichzeitig festgelegt. Es fordert auch zwei.js an, die Elektronen und Protonen mit bestimmten Geschwindigkeiten zu drehen. Um das nächste Element zu laden, machen wir ein weiteres Elektron und ein weiteres Proton oder Neutronen sichtbar und aktualisieren den Elementnamen. Nach dem Klicken auf das letzte Element sind alle Partikel erneut versteckt, damit wir von vorne beginnen können. Die Variable

  verfolgt die Anzahl der derzeit sichtbaren Atompartikel, sodass wir sie entsprechend anzeigen oder verbergen können. Zwei.JS -Bibliothek und wie sie verwendet werden kann, um Formen wie Rechtecke, Kreise und Ellipsen zu zeichnen. Danach diskutierten wir, wie wir verschiedene Objekte gruppieren können, um sie alle auf einmal zu manipulieren. Wir haben diese Fähigkeit verwendet, Elemente zu gruppieren, um sie in Synchronisation zu übersetzen und zu drehen. Diese Tools kamen alle in unserer Animation der Atome der ersten zehn Elemente in der periodischen Tabelle zusammen. Der Fokus dieses Beitrags lag darauf, Ihnen schnell loszulegen, sodass wir nur die Grundlagen behandelt haben. Sie sollten jedoch die offizielle Dokumentation lesen, um mehr über die Bibliothek zu erfahren!

Das obige ist der detaillierte Inhalt vonAnfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!