2Dグラフィックスを描画するための初心者のガイド。2.js

two.jsは、コードを使用して2Dシェイプを簡単に作成できるAPIです。フォローすると、JavaScriptから形状を作成してアニメーション化する方法を学びます。ライブラリには、画面上に異なる形状がどのように表示されるか、またはアニメーション化されている方法を制御するために使用できる多くの方法があります。

グループ内の基本的な形状の作成

• グラデーションの定義とテキストの作成テキストを定義し、テキストを作成します
GitHubからライブラリの模擬バージョンをダウンロードするか、CDNホストバージョンに直接リンクできます。ライブラリをWebページに追加したら、さまざまな形状やオブジェクトの描画とアニメーション化を開始できます。
• 基本的な形状を作成する
• 最初に、2Dを描画し、形状をアニメーション化する要素について2つのjsを伝える必要があります。いくつかのパラメーターをTwo.Makeline（x1、y1、x2、y2）

に渡すことができます。ここでは、2つのMakerectangle（x、y、width、height）

および2.makecircle（x、y、radius）

および2.makearrow（x1、y1、x2、y2、size）

メソッド。 y1

値は、矢印の尾の位置を決定します。 y2

値は、矢印の位置を決定します。 5番目のパラメーターは、矢印のサイズを決定します。

radiusと呼ばれるメソッドがあり、中心からのポリゴンの頂点の距離を決定します。この方法のパラメーターとして、異なるオブジェクトのリストを渡すか、オブジェクト、パス、またはグループの配列を渡すことができます。また、一度に記入

、linewidth

値を返します。実際、グループの位置を設定します。長方形はグループの一部であるため、自動的に移動します。練習のために、コードを変更し、長方形を2つの等しいグループに分割する必要があります。それらのそれぞれに別のストローク色の値を適用して、独自の幾何学的なアートピースを作成します。

勾配を定義し、テキストを作成する

2つの線形勾配とラジアル勾配の両方を2つで定義できます。JS。勾配を定義することは、画面上で自動的にレンダリングされることを意味するものではありませんが、2.makelineargradient（x1、y1、x2、y2、stops）を設定するときに使用できるようになります。値は新しい2.stop（offset、color、ofacity）、ここで2.makeradialgradient（x、y、radius、stops、fx、fy）。この場合、値2.maketext（message、x、y、styles）値。パラメーターの名前から、 message <code>messageが作成したい実際のテキストであることが明らかです。パラメーター x<code>xおよび y<code>yは、テキストを書くためのセンターとして機能するポイントの座標です。 styles <code>パラメーターは、大量のプロパティセットの値を設定するために使用できるオブジェクトです。<code>styles

スタイルを使用して、font code> size> size> size> size> alignment<p>などのプロパティの値を設定できます。また、<code> fill <code>、<code> stroke<code>family、 ofacity> ofacity> opacity> rotation<code>size、 scale <code>alignment、および翻訳<code>fillなどのプロパティの値を指定することもできます。このチュートリアルでは、2つの.jsを使用して、電子が核の周りを回転している周期表の最初の10の要素をレンダリングする方法を示します。また、核は、表現の視覚的魅力を改善するためのわずかな動きを持ちます。strokeopacity後で使用されるいくつかの変数と関数を定義することから始めます。これらは後で中央に原子を配置するために使用されます。 elementNames<code>rotation配列には、周期表の最初の10の要素の名前が含まれています。各名前のインデックスは、その要素の電子とプロトンの数に対応し、空の文字列から始まります。 styles <code>オブジェクトには、テキストオブジェクトをスタイリングするためのプロパティが含まれています。<code>scaletranslation関数 intrange（）

を定義して、極端にランダムな整数値を取得します。赤/黒い放射状勾配は陽子を表し、青/黒い勾配は中性子を表します。

intrange（）<p>関数を使用して、これらすべてのニュートロンとプロトンを互いに20ピクセル以内に配置しました。 <code> makecircle（）

メソッドは、これらのプロトンと中性子の半径も10ピクセルに設定します。その後、 nucleusArray<p>を反復し、各円を別の勾配で交互に埋めます。</p> <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><p>核内に中性子と陽子を配置するのは簡単でした。ただし、電子を均一な距離に適切に配置するには、少し数学が必要です。 <code >shellRadius変数を使用して、核からの異なる電子シェルの距離を指定します。円全体が2 piラジアンに等しい角度を覆います。 2つのPiラジアンをそれらの間に均等に分布させることにより、異なる電子を均一に配置できます。

Math.cos()Math.sin()および

関数は、角度に基づいて異なる電子の位置ベクトルの垂直および水平コンポーネントを分離するために使用されます。また、特定の軌道にあるすべての電子の充填色を一度に設定します。

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>

コードのこの部分は、個々の電子とプロトンの不透明度をゼロに設定します。また、2つのjsに、特定の速度で電子とプロトンを回転させるように指示します。

var two = new Two({ fullscreen: true }).appendTo(elem);<br><br>var protonColor = two.makeRadialGradient(<br>  0,<br>  0,<br>  15,<br>  new Two.Stop(0, "red", 1),<br>  new Two.Stop(1, "black", 1)<br>);<br><br>var neutronColor = two.makeRadialGradient(<br>  0,<br>  0,<br>  15,<br>  new Two.Stop(0, "blue", 1),<br>  new Two.Stop(1, "black", 1)<br>);<br><br>for (i = 0; i < nucleusCount; i++) {<br>  nucleusArray.push(two.makeCircle(intRange(-10, 10), intRange(-10, 10), 8));<br>}<br><br>nucleusArray.forEach(function(nucleus, index) {<br>  if (index % 2 == 0) {<br>    nucleus.fill = protonColor;<br>  }<br>  if (index % 2 == 1) {<br>    nucleus.fill = neutronColor;<br>  }<br>  nucleus.noStroke();<br>});<br>

コードの最終部分により、マウスをクリックするか、タッピングして要素を反復させることができます。次の要素をロードするには、もう1つの電子ともう1つのプロトンまたは中性子を表示し、要素名を更新します。最後の要素をクリックした後、すべての粒子が再び隠されているので、やり直すことができます。

for (var i = 0; i < 10; i++) {<br>  if (i < 2) {<br>    var shellRadius = 50;<br>    var angle = i * Math.PI;<br>    electronArray.push(<br>      two.makeCircle(<br>        Math.cos(angle) * shellRadius,<br>        Math.sin(angle) * shellRadius,<br>        5<br>      )<br>    );<br>  }<br>  if (i >= 2 && i < 10) {<br>    var shellRadius = 80;<br>    var angle = (i - 2) * Math.PI / 4;<br>    electronArray.push(<br>      two.makeCircle(<br>        Math.cos(angle) * shellRadius,<br>        Math.sin(angle) * shellRadius,<br>        5<br>      )<br>    );<br>  }<br>}<br>

可変は、現在見える原子粒子の数を追跡して、それに応じて表示または非表示にできるようにします。 Two.JSライブラリと、長方形、円、楕円などの形状を描くために使用する方法。その後、さまざまなオブジェクトをグループ化して一度に操作する方法について説明しました。この機能を使用して、要素をグループ化して同期して翻訳して回転させました。これらのツールはすべて、周期表の最初の10の要素の原子のアニメーションにまとめられました。この投稿の焦点は、あなたがすぐに始めるのを助けることでしたので、私たちは基本のみを取り上げました。ただし、ライブラリの詳細については、公式ドキュメントを読んでください！

以上が2Dグラフィックスを描画するための初心者のガイド。2.jsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。