이미지와 애니메이션은 매력적이고 재미있으며, 서면 단어만으로는 처리하고 이해하기 어려운 정보를 전달하는 데 적합합니다. 이는 카메라로 찍은 사진뿐 아니라 컴퓨터로 그린 그림도 마찬가지다. 이 기사에서는 최고의 무료 오픈 소스 JavaScript 드로잉 라이브러리 중 일부를 보여 드리겠습니다.
HTML5 canvas 요소와 SVG와 같은 기술을 사용하여 브라우저에 원하는 것을 그리는 무료 라이브러리가 많이 있습니다. 이러한 라이브러리에서 제공하는 API를 사용하여 그림을 그릴 수 있을 뿐만 아니라 자신이 만든 모든 것에 애니메이션을 적용할 수도 있습니다.
시작해 보세요.
Two.js는 JavaScript를 사용하여 2D 도형을 그리는 데 매우 인기 있고 사용하기 쉬운 라이브러리입니다. 잘 문서화되어 있으며 기본 사항을 배우는 데 시간이 거의 걸리지 않습니다.
이 도서관에서 당신이 좋아할 두 가지 점. 우선 렌더링과 관련이 없습니다. 이는 동일한 API를 사용하여 SVG 또는 WebGL을 통해 캔버스 요소에 그래픽을 그릴 수 있음을 의미합니다. 이 기능은 제가 이 라이브러리를 사용할 때 많은 시간을 절약해 주었습니다. 둘째, 라이브러리에는 화면에 그리는 모든 것에 애니메이션을 적용할 수 있는 기능이 내장되어 있습니다.
다양한 키보드와 마우스 이벤트를 듣고 화면에 그려진 다양한 요소의 크기, 위치, 색상을 업데이트하여 간단한 게임을 더 쉽게 만들 수도 있습니다.
Jono Brandel의 위 예는 Two.js를 사용하여 캔버스에 애니메이션 물결 모양의 도로를 만듭니다. 공식 웹사이트에서 더 흥미로운 프로젝트를 찾아볼 수 있습니다.
Paper.js 라이브러리는 JavaScript를 사용하여 그림을 그리려는 사람들을 위한 또 다른 무료 오픈 소스 솔루션입니다. 이 라이브러리는 canvas를 사용하여 그리기 애니메이션을 처리합니다. 그러나 주요 초점은 래스터 이미지보다는 벡터 기반 드로잉에 있습니다.
이 라이브러리를 사용하여 그래픽을 만드는 데는 두 가지 옵션이 있습니다. 계속해서 일반 JavaScript를 사용하거나 PaperScript라는 라이브러리의 수정된 버전을 사용하는 것을 고려해 보세요. PaperScript를 사용하려면 사용법을 배우는 데 약간의 추가 시간이 필요합니다. 그러나 라이브러리 전체에서 사용되는 Point 和 Size 개체에 대한 계산이 더 쉬워지는 등 몇 가지 장점이 있습니다.
중첩된 레이어, 단순 경로, 복합 경로와 같은 기능을 포함하여 이 라이브러리를 사용하여 많은 흥미로운 작업을 수행할 수 있습니다. 라이브러리를 사용하여 그린 곡선을 부드럽게 만들 수도 있습니다. 또한 혼합 모드를 사용하여 서로 다른 요소 간의 중첩을 시각적으로 더욱 매력적으로 만들 수도 있습니다.
위의 Alberto Jerez가 작성한 CodePen은 여러 레이어와 합성 기능을 사용하여 충돌할 때 모양이 바뀌는 원과 함께 흥미로운 효과를 만들어냅니다.
p5.js 라이브러리는 학습 곡선이 가파르지 않지만 필요한 경우 매우 복잡한 시스템을 만들 수 있는 라이브러리를 찾는 사람들에게 훌륭한 선택입니다. 공식 홈페이지의 P5.js 진입 페이지에는 몇 줄의 코드만으로 마우스가 움직이는 곳에 원을 그릴 수 있는 기능적인 예제가 있습니다.
이 라이브러리는 인기 있는 Java 처리 플랫폼에서 영감을 얻었으며 문제가 발생할 때 도움을 줄 수 있는 활발한 커뮤니티를 갖추고 있습니다. 이 라이브러리의 기능을 보여주는 많은 예제가 있습니다. 영감을 얻을 때 큰 도움이 될 수 있습니다. 이를 사용하여 물리학을 시뮬레이션하고, 입자 시스템을 만들고, 다양한 사용자 입력에 반응하는 방법을 배울 수 있습니다.
Johan Karlsson의 위 예는 p5.js를 사용하여 캔버스 주위를 무작위로 움직이는 작은 곤충을 만듭니다. 데모의 아무 곳이나 클릭하면 무작위로 배치된 새로운 모기 세트가 생성됩니다.
Konva 라이브러리는 지금까지 언급한 라이브러리와 조금 다릅니다. 이를 사용하여 캔버스에 기본 모양을 그릴 수 있지만 훨씬 더 많은 작업을 수행하는 것도 전적으로 가능합니다. 고성능 애니메이션과 전환을 추가하여 캔버스에 그리는 모든 것에 시각적 매력을 더할 수 있습니다.
이 라이브러리의 특별한 점은 화면에 그리는 모든 것에 이벤트 핸들러를 연결할 수 있다는 것입니다. 캔버스에서 이전에 그린 개체를 선택하고 이동할 수 있습니다. 또한 그리는 다른 항목에 영향을 주지 않고 선택한 개체의 크기를 조정하고 회전할 수도 있습니다.
이러한 기능은 간단한 스케치 응용프로그램과 캔버스에 드래그 앤 드롭 게임을 만드는 데 도움이 되는 라이브러리를 원하는 사람들에게 적합합니다. 그룹을 사용하여 여러 도형을 함께 이동하고 조작할 수 있습니다.
위의 간단한 퍼즐 게임은 Jakub Beneš가 Konva를 사용하여 제작했습니다. 기본적인 아이디어는 다른 상자와 약간 다른 색상의 상자를 선택하는 것입니다.
Fabric.js 라이브러리는 Konva와 동일한 철학을 바탕으로 구축되었으며 동일한 기능이 많이 있습니다. 사실 실제로는 Fabric.js가 Konva보다 더 대중적이고 활동적인 것 같습니다.
이 라이브러리는 canvas 요소 위에 구축된 대화형 개체 모델을 제공합니다. 이는 기본적으로 나중에 상호 작용하기 위해 캔버스에 기하학적 모양 및 이미지와 같은 다양한 개체를 그릴 수 있음을 의미합니다. 이 라이브러리는 사용자에게 캔버스에 그리는 모든 것을 이동, 크기 조정 및 회전할 수 있는 옵션을 제공하므로 간단한 모형 애플리케이션, 밈 생성기 등을 구축할 수 있습니다.
위의 Martin Florian의 CodePen을 사용하여 캔버스에 텍스트를 드래그하거나 자신만의 모양과 이미지를 추가해 보세요. 도서관의 홈 페이지에서는 손으로 그림을 그리고 패턴과 그라디언트를 사용하여 모양을 채우는 등 더 많은 기능을 보여줍니다.
Snap.svg 라이브러리는 SVG 및 JavaScript의 강력한 기능을 사용하여 해상도에 독립적인 벡터 그래픽을 생성하려는 사람들에게 인기 있는 선택입니다. 라이브러리는 오픈 소스이며 완전히 무료로 사용할 수 있습니다.
기존 SVG 콘텐츠를 조작하고 애니메이션화할 수 있을 뿐만 아니라 SVG 콘텐츠를 동적으로 생성할 수 있는 깔끔하고 강력한 API가 함께 제공됩니다. 라이브러리는 IE9 이상에 대한 지원을 염두에 두고 개발되었습니다. 이를 통해 개발자는 이전 브라우저 지원에 대한 걱정 없이 마스크, 클리핑, 패턴과 같은 기능을 더 쉽게 제공할 수 있습니다.
사용하기 쉬운 라이브러리는 fill、Stroke 和 StrokeWidth와 같은 키-값 쌍을 사용하여 기본 모양을 만들고 속성을 적용하는 다양한 방법을 제공합니다. 요소를 그룹화하여 한 번에 여러 항목을 변경할 수도 있습니다. 이름이나 적절한 CSS 선택기로 다양한 개체를 쉽게 참조할 수 있습니다. Ronan Levesque가 작성한 아래 예를 확인하세요.
JavaScript를 사용하여 SVG를 그리고 애니메이션을 적용하려는 경우 인기 있는 또 다른 옵션은 SVG.js 라이브러리를 사용하는 것입니다. 라이브러리 개발자의 목표는 SVG 사양을 거의 완벽하게 지원하면서 가능한 한 작고 빠르게 만드는 것입니다. 종속성이 없으며 라이브러리를 독립적으로 사용할 수 있습니다.
사이트 홈페이지에서 Vanilla JS 및 Snap.svg와 비교하여 성능을 확인할 수 있습니다. 기본 모양을 만들고 내장된 기능을 사용하여 DOM에 추가할 수 있습니다. 이 라이브러리에는 화면에 그리는 모든 것의 모양을 조작할 수 있는 다양한 기능이 포함되어 있습니다. 또한 이벤트 리스너를 지원하므로 사용자 상호 작용을 기반으로 SVG 요소를 변경하거나 애니메이션하는 기능을 구현할 수 있습니다.
위의 George Francis의 CodePen에서 다양한 옵션의 값을 변경하여 SVG.js를 사용하여 고유한 패턴을 생성해 보세요.
목록의 마지막 도서관은 대중의 관심을 끌지 못할 수도 있지만 고유한 목적을 제공하므로 언급할 가치가 있습니다. UML 시퀀스 다이어그램을 그려야 하는 프로젝트에 참여한 적이 있나요? 동의하신다면 JS Sequence Gallery가 여러분에게 아주 적합할 것입니다.
이 라이브러리는 JavaScript를 사용하여 간단한 SVG 기반 시퀀스 다이어그램을 빠르게 생성합니다. 당신이 해야 할 일은 유효한 텍스트 표현을 제공하는 것뿐입니다. 마음에 들지 않을 수도 있는 한 가지는 이 라이브러리가 제대로 작동하기 위해 다른 여러 라이브러리에 의존한다는 것입니다. 여기에는 Snap.svg, 웹 글꼴 로더, underscore.js 및 선택적으로 jQuery가 포함됩니다.
그러나 이 라이브러리는 많은 코드 작성에 대한 걱정 없이 이러한 차트를 빠르게 생성하려는 누구에게나 여전히 좋은 선택입니다. 자신만의 CSS 스타일을 적용하여 다양한 구성 요소의 색상과 채우기를 변경할 수도 있습니다. 위의 E T 데모를 살펴보고 코드를 편집하여 차트가 어떻게 변경되는지 확인하세요.
JavaScript를 사용하여 개체를 그리기 위한 무료 라이브러리가 많이 있습니다. 이 기사의 목표는 고유한 문제를 해결하는 훌륭한 기능 세트를 갖춘 일부 인기 라이브러리를 강조하는 것입니다. 이 기사가 SVG를 사용하는 것뿐만 아니라 캔버스에 요소를 그리고 애니메이션을 적용할 수 있는 라이브러리를 선택하는 데 도움이 되었기를 바랍니다.
위 내용은 상위 8개 JavaScript 드로잉 라이브러리: 무료 및 오픈 소스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
