初学者的指南绘制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<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>阵列包含周期表的前十个元素的名称。每个名称的索引对应于该元素的电子和质子的数量，它以一个空字符串开始。 <code>样式<p>对象包含用于造型文本对象的属性。</p>><p>我们还定义了一个函数<code> intrange（）<code>intRange()在给定的极端内获取一个随机的整数值。makeCircle()nucleusArray

这将创建两个实例并定义了两个径向梯度。红色/黑色径向梯度将代表质子，而蓝色/黑色梯度将代表中子。 我们使用了 intrange（）功能将所有这些中子和质子放置在彼此20个像素中。 <code> makeCircle（）方法还将这些质子和中子的半径设置为10像素。之后，我们迭代<code> nucleusArray ，并用不同的梯度交替填充每个圆圈。在核内放置中子和质子很容易。但是，将电子适当地放置在均匀距离处将需要一些数学。我们使用<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>>变量来指定不同电子壳与核的距离。整个圆的角度等于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中文网其他相关文章！