初學者的指南繪製2D圖形的指南

tw.js是一種API，可以輕鬆使用代碼創建2D形狀。跟進，您將學習如何從JavaScript中創建和動畫形狀。

twe.js是渲染器的敏捷，因此您可以依靠同一API使用Canvas，SVG或WebGL繪製2D。該庫具有許多方法，可用於控制屏幕上的不同形狀或它們的動畫。圖書館的未壓縮版本的大小約為128 kb，而壓縮版本為50 kb。如果您使用的是最新版本，則可以使用自定義構建進一步減少庫的大小。

• 可以從github下載庫的縮小版本，也可以直接鏈接到cdn hosted版本。將庫添加到網頁中後，您可以開始繪製和動畫不同的形狀或對象。
• >創建基本形狀
• 首先，您需要告訴Twiel.js。您可以將一些參數傳遞到兩個參數。在這裡，tw.makerectangle（x，y，width，height）
和兩個。 makecircle（x，y，radius）和tw.makearrow（x1，y1，y1，x2，y2，size size）值確定箭頭尾部的位置。 Y2值確定箭頭的位置。第五參數確定箭頭的大小。

>有一種稱為RADIUS

的方法確定多邊形頂點與中心的距離，而兩個。 MakeGroup（對象）

。您可以傳遞不同對象的列表，也可以將一組對象，路徑或組作為參數傳遞給此方法。它還將一次返回填充

，lineWidth

值。我們實際上將設置小組的位置。由於矩形是組的一部分，因此它們將自動移動。

進行練習，您應該嘗試修改代碼並將矩形分為兩個平等組。在每個中每個顏色值中應用一組不同的筆觸

顏色值，以創建自己獨特的幾何藝術作品。

定義梯度並寫作文本

您可以在兩個js中定義線性和徑向梯度。定義梯度並不意味著它將在屏幕上自動渲染，但是在設置兩個時，您可以使用它。 makelineargradient（x1，y1，y1，x2，y2，stop）。值新的兩個stop（偏移，顏色，不透明度），其中兩個。 MakerAdialGradient（x，y，radius，stop，stop，fx，fy>>）。在這種情況下，值二。 makeText（消息，x，y，樣式）。從參數的名稱中可以明顯看出，消息是您要編寫的實際文本。參數 x 和 y<code>message是該點的坐標，它將充當編寫文本的中心。 樣式<code>x參數是一個可以用於設置大型屬性值的對象。 y>styles>您可以使用樣式設置諸如font family

的屬性值， size size <p>，<code> code> Acod> Aligimment <ancimegnment>。您還可以指定諸如<code> fill<code>family， stroke<code>size， opacity <code>alignment， rotage> rotation <code>fill， scor> scor<code>stroke和 translation<code>opacityrotationscaletranslation

var rects = [];<br><br>var elemWidth = document.querySelector("#draw-shapes").offsetWidth;<br><br>for (i = 0; i < 100; i++) {<br>  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>

centerXcenterY在本教程中，我將向您展示如何使用Two.js呈現元素週期表的前十個要素，電子圍繞核旋轉的電子。核還將有一些輕微的動作來提高我們表示的視覺吸引力。 elementNames>styles我們首先定義一些變量和函數，這些變量和函數將在以後使用。

>

intRange()>上面的代碼存儲了我們窗口中心的坐標，以變量 cope> cente> cente> centerx <centex> and 和 Centery。這些將稍後將我們的原子放在中心。 <code> elementNames<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var centerX = window.innerWidth / 2;&lt;br&gt;var centerY = window.innerHeight / 2;&lt;br&gt;&lt;br&gt;var elem = document.getElementById(&quot;atoms&quot;);&lt;br&gt;&lt;br&gt;var elementNames = [&lt;br&gt; &quot;&quot;,&lt;br&gt; &quot;Hydrogen&quot;,&lt;br&gt; &quot;Helium&quot;,&lt;br&gt; &quot;Lithium&quot;,&lt;br&gt; &quot;Beryllium&quot;,&lt;br&gt; &quot;Boron&quot;,&lt;br&gt; &quot;Carbon&quot;,&lt;br&gt; &quot;Nitrogen&quot;,&lt;br&gt; &quot;Oxygen&quot;,&lt;br&gt; &quot;Fluorine&quot;,&lt;br&gt; &quot;Neon&quot;&lt;br&gt;];&lt;br&gt;&lt;br&gt;var styles = {&lt;br&gt; alignment: &quot;center&quot;,&lt;br&gt; size: 36,&lt;br&gt; family: &quot;Lato&quot;&lt;br&gt;};&lt;br&gt;&lt;br&gt;var nucleusCount = 10;&lt;br&gt;var nucleusArray = Array();&lt;br&gt;&lt;br&gt;var electronCount = 10;&lt;br&gt;var electronArray = Array();&lt;br&gt;&lt;br&gt;function intRange(min, max) {&lt;br&gt; return Math.random() * (max - min) + min;&lt;br&gt;}&lt;br&gt;</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>陣列包含週期表的前十個元素的名稱。每個名稱的索引對應於該元素的電子和質子的數量，它以一個空字符串開始。 <code>樣式<p>對象包含用於造型文本對象的屬性。 </p>><p>我們還定義了一個函數<code> intrange（）<code>intRange()在給定的極端內獲取一個隨機的整數值。 makeCircle()nucleusArray

這將創建兩個實例並定義了兩個徑向梯度。紅色/黑色徑向梯度將代表質子，而藍色/黑色梯度將代表中子。 我們使用了 intrange（）功能將所有這些中子和質子放置在彼此20個像素中。 <code> makeCircle（）方法還將這些質子和中子的半徑設置為10像素。之後，我們迭代<code> nucleusArray ，並用不同的梯度交替填充每個圓圈。 在核內放置中子和質子很容易。但是，將電子適當地放置在均勻距離處將需要一些數學。我們使用<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var rects = [];&lt;br&gt;&lt;br&gt;var elemWidth = document.querySelector(&quot;#draw-shapes&quot;).offsetWidth;&lt;br&gt;&lt;br&gt;for (i = 0; i &lt; 100; i++) {&lt;br&gt; rects[i] = two.makeRectangle(&lt;br&gt; Math.floor(Math.random() * elemWidth * 2),&lt;br&gt; Math.floor(Math.random() * 420 * 2),&lt;br&gt; 10 + Math.floor(Math.random() * 100),&lt;br&gt; 10 + Math.floor(Math.random() * 100)&lt;br&gt; );&lt;br&gt;}&lt;br&gt;&lt;br&gt;var group = two.makeGroup(...rects);&lt;br&gt;&lt;br&gt;group.noFill();&lt;br&gt;group.stroke = &quot;black&quot;;&lt;br&gt;group.linewidth = 6;&lt;br&gt;&lt;br&gt;two.update();&lt;br&gt;</pre><div class="contentsignin">登入後複製</div></div><div class="contentsignin">登入後複製</div></div>>變量來指定不同電子殼與核的距離。整個圓的角度等於2 Pi弧度。我們可以通過平等分配2個PI弧度來統一地放置不同的電子。 <ancy><p>><code>shellRadius>和

函數用於根據其角度的角度分離不同電子的位置向量的垂直和水平成分。它還一次將所有電子的填充顏色設置為特定軌道。它還告訴Two.js以特定的速度旋轉電子和質子。

Math.cos()Math.sin()>代碼的最後一部分使我們通過單擊鼠標或敲擊來迭代元素。為了加載下一個元素，我們將更多電子和一個質子或中子可見，然後更新元素名稱。單擊最後一個元素後，所有粒子都會再次隱藏，因此我們可以重新開始。

>可變跟踪當前可見的原子粒子數量，以便我們可以相應地顯示或隱藏它們。兩個庫庫以及如何用於繪製矩形，圓圈和橢圓等形狀。之後，我們討論瞭如何一次分組不同的對像以一次操縱它們。我們使用此能力將元素分組以同步轉換和旋轉它們。這些工具都在我們所看到的元素週期表中前十個元素的原子的動畫中匯集在一起​​，您可以看到，創建動畫的2D圖形非常容易使用two.js。這篇文章的重點是幫助您快速入門，因此我們只介紹了基礎知識。但是，您應該閱讀官方文檔，以了解有關庫的更多信息！

var centerX = window.innerWidth / 2;<br>var centerY = window.innerHeight / 2;<br><br>var elem = document.getElementById("atoms");<br><br>var elementNames = [<br>  "",<br>  "Hydrogen",<br>  "Helium",<br>  "Lithium",<br>  "Beryllium",<br>  "Boron",<br>  "Carbon",<br>  "Nitrogen",<br>  "Oxygen",<br>  "Fluorine",<br>  "Neon"<br>];<br><br>var styles = {<br>  alignment: "center",<br>  size: 36,<br>  family: "Lato"<br>};<br><br>var nucleusCount = 10;<br>var nucleusArray = Array();<br><br>var electronCount = 10;<br>var electronArray = Array();<br><br>function intRange(min, max) {<br>  return Math.random() * (max - min) + min;<br>}<br>

更多JavaScript Resources

以上是初學者的指南繪製2D圖形的指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！