2D 그래픽을 그리는 초보자 가이드 2. JS

2.js는 코드로 2D 모양을 쉽게 만들 수있는 API입니다. 따라 가면 JavaScript에서 모양을 생성하고 애니메이션하는 방법을 배웁니다.

2.js는 렌더러가 아는 사람이 아니므로 동일한 API에 의존하여 캔버스, SVG 또는 WebGL을 사용하여 2D를 그릴 수 있습니다. 라이브러리에는 화면에 다른 모양이 어떻게 나타나는지 또는 애니메이션 방법을 제어하는 ​​데 사용할 수있는 많은 방법이 있습니다. 기본 모양 생성

그룹에서 객체를 조작하는

텍스트를 정의하고 텍스트를 작성하고 쓰기

Github에서 미니저 버전의 라이브러리를 다운로드하거나 CDN 호스팅 버전에 직접 연결할 수 있습니다. 웹 페이지에 라이브러리를 추가 한 후에는 다른 모양이나 물체를 그리거나 애니메이션 할 수 있습니다.
• 기본 모양 생성
먼저, 2d를 그리고 셰이프를 애니메이션하려는 요소에 대해 2.js에게 말해야합니다. 일부 매개 변수를 둘에 전달할 수 있습니다. 여기, 2.makerectangle (x, y, 너비, 높이) 및 2.makeccle (x, y, radius) 및 2.makearrow (x1, y1, x2, y2, size)
• 메소드. y1
값은 화살표의 꼬리 위치를 결정합니다. y2
• 값은 화살촉의 위치를 ​​결정합니다. 다섯 번째 매개 변수는 화살촉의 크기를 결정합니다.
RADIUS

라는 방법이 있습니다. 다른 객체 목록을 전달하거나 객체, 경로 또는 그룹 배열을이 메소드의 매개 변수로 전달할 수 있습니다. 또한 한 번에 fill

, linewidth

값을 반환합니다.

DIV 내부의 어느 곳에서나 클릭하여 직사각형의 위치를 ​​변경할 수 있습니다. 우리는 실제로 그룹의 위치를 ​​설정할 것입니다. 사각형은 그룹의 일부이므로 자동으로 이동합니다.

연습을하려면 코드를 수정하고 직사각형을 두 개의 동일한 그룹으로 나누어야합니다. 고유 한 지오메트리 아트 조각을 만들기 위해 각각 셋째 스트로크 세트 색상 값을 적용하십시오. 그라디언트 정의 및 쓰기 텍스트

2. j. 그라디언트를 정의한다고해서 화면에서 자동으로 렌더링 될 수는 없지만 2.makelineargradient (x1, y1, x2, y2, spets)를 설정할 때 사용할 수 있습니다. 값 새로운 2.Stop (오프셋, 색상, 불투명도)

, 여기서 2.makeradialgradient (x, y, radius, stop, fx, fy) . 이 경우 값 2.maketext (Message, X, Y, Styles) . messag 매개 변수 <code> x 및 y 는 텍스트를 작성하기위한 중심 역할을하는 지점의 좌표입니다. 스타일 매개 변수는 큰 속성 세트의 값을 설정하는 데 사용할 수있는 객체입니다. 는 스타일을 사용하여 font family , <code> size <lignment>와 같은 속성의 값을 설정할 수 있습니다. <code> fill message, stroke , <code> 불투명도 x, 회전과 같은 속성의 값을 지정할 수 있습니다. 이 튜토리얼에서는 2.js를 사용하여주기 테이블의 첫 10 가지 요소를 핵 주위로 회전하는 방법을 보여줍니다. 핵은 또한 우리의 표현의 시각적 매력을 향상시키기 위해 약간의 움직임을 가질 것입니다. <code>y 우리는 나중에 사용될 몇 가지 변수와 함수를 정의하는 것으로 시작합니다. styles 위의 코드는 centerx <code> 센터의 변수에 창 중심의 좌표를 저장합니다. 이것들은 나중에 우리의 원자를 중앙에 배치하는 데 사용됩니다. <code> elementNames 배열에는주기 테이블의 처음 10 개 요소의 이름이 포함되어 있습니다. 각 이름의 인덱스는 해당 요소의 전자 및 양성자 수에 해당하며 빈 문자열로 시작합니다. <code> 스타일 <p> 객체에는 텍스트 객체를 스타일링하기위한 속성이 포함되어 있습니다. <code>family 우리는 또한 intrange () intrange () intrange ()가 주어진 극단 내에서 임의의 정수 값을 정의했습니다. 빨간색/검은 방사형 그라디언트는 양성자를 나타내고, 블루/블랙 그라디언트는 중성자를 나타냅니다. <code>size 우리는 intrange () 기능을 사용하여 이러한 모든 중성자와 양성자를 서로 20 픽셀 내에 배치했습니다. <code> makecircle () 메소드는 또한이 양성자와 중성자의 반경을 10 픽셀로 설정합니다. 그 후, 우리는 <code> nucleusarray alignment를 반복하고 각 원을 다른 그라데이션으로 교대로 채 웁니다.

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>

<<> 핵 내부에 중성자와 양성자를 배치하는 것은 쉬웠습니다. 그러나 전자를 균일 한 거리에 올바르게 배치하려면 약간의 수학이 필요합니다. 우리는

변수를 사용하여 핵에서 다른 전자 쉘의 거리를 지정합니다. 전체 원은 2 개의 PI 라디안과 같은 각도를 덮습니다. 우리는 2 개의 pi 라디안을 동일하게 분산시켜 다른 전자를 균일하게 배치 할 수 있습니다. <🎜 🎜> shellRadius <🎜 🎜> 및 <🎜

기능은 각도를 기반으로 다른 전자의 위치 벡터의 수직 및 수평 구성 요소를 분리하는 데 사용됩니다.

Math.cos() 코드 의이 부분은 다른 쉘에서 전자를 두드리게합니다. 또한 특정 궤도의 모든 전자에 대한 충전 색상을 한 번에 설정합니다. <🎜 🎜> <🎜 🎜> Math.sin() 코드 의이 부분은 개별 전자와 양성자의 불투명도를 0으로 설정합니다. 또한 2.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>

코드의 마지막 부분을 통해 마우스를 클릭하거나 탭핑하여 요소를 반복 할 수 있습니다. 다음 요소를로드하기 위해, 우리는 하나 이상의 전자와 하나의 양성자 또는 중성자를 보이고 요소 이름을 업데이트합니다. 마지막 요소를 클릭 한 후 모든 입자가 다시 숨겨져 다시 시작할 수 있습니다. <🎜 🎜> 변수는 현재 보이는 원자 입자의 수를 추적하여 우리가 그에 따라 보여 주거나 숨길 수 있도록 다음과 같이 숨길 수 있습니다. 다음 코드 페펜 데모를 클릭하거나 탭핑하려면 주기성 테이블의 첫 10 가지 요소를보십시오.

<🎜

<🎜 <🎜 <🎜 <🎜

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>

Final Thought <🎜

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>

2.js 라이브러리 및 사각형, 원 및 타원과 같은 모양을 그리는 데 사용되는 방법. 그 후, 우리는 어떻게 다른 객체를 그룹화하여 한 번에 그들을 조작 할 수 있는지 논의했습니다. 우리는이 기능을 사용하여 요소를 그룹화하여 동기화로 변환하고 회전했습니다. 이 도구는 모두주기 테이블에서 처음 10 개 요소의 원자 애니메이션에서 함께 모였습니다.

볼 수 있듯이 애니메이션 2D 그래픽을 만드는 것은 Two.js를 사용하여 매우 쉽습니다. 이 게시물의 초점은 신속하게 시작하는 데 도움이되었으므로 기본 만 다루었습니다. 그러나 라이브러리에 대한 자세한 내용을 알아 보려면 공식 문서를 읽어야합니다!

위 내용은 2D 그래픽을 그리는 초보자 가이드 2. JS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!