Rough.js는 캔버스와 SVG로 손으로 그린 ​​그래픽을 만듭니다.

웹이 얼마나 멀리 떨어져 왔는지 보니 놀랍습니다. 동적 요소 와 같은 브라우저 내 SVG. 모든 것을 디자인 할 수 있습니다. 맞춤 애니메이션 에 HTML5 게임 올바른 라이브러리 사용.

가장 가치있는 라이브러리 중 하나는 Rough.js. 그것은 무료 그래픽 생성 스크립트 현재 베타 버전입니다. 캔버스 및 SVG 요소에서 작동합니다..

사용자 정의 아이콘, 막대 그래프, 코드에서 원하는 모든 것을 만들 수 있습니다. 그리고, 최종 결과 화려한 손으로 그린 ​​느낌을 받다.

이 글을 쓰는 시점에서 Rough.js는 여전히 v0.1 베타 버전이므로 라이브 프로덕션 웹 사이트에 준비가되지 않았을 수 있습니다.. 하지만 그것은 웹 표준이 빠르게 진행되고 있습니다. 우리는 이런 종류의 물건들이 가능한 시대에 들어서고 있습니다..

예를 들어 이걸 가져 가라. 진행 표시 줄 Rough.js를 통해 생성됩니다. 를 클릭하면 “스타트” 버튼을 누르면 알 수 있습니다. 커스텀 애니메이션을 실행한다. 그 정말 손으로 그린 ​​것처럼 보인다.. 그것은 사용하고 있습니다. 미리 정의 된 패턴을 가진 SVG 라인 진정으로 자연스럽게 보이는 흔들 거리는 효과 만들기.

메인 GitHub 페이지에서 섹션 목록을 찾을 수 있습니다. 실행중인 Rough.js의 많은 예.

이 모든 것 코드 샘플이있다. 해야하고 어떤 웹 사이트에서도 쉽게 재 작업 할 수 있습니다.. Rough.js 스크립트 파일과 자바 스크립트를 망치기위한 인내가 필요합니다..

여기에 샘플 스 니펫 어떻게하는지 보여주기 코드에 직사각형 만들기:

 var rough = 새 RoughCanvas (document.getElementById ( 'myCanvas'), 400, 200); 거친 직사각형 (10, 10, 200, 200); // x, y, width, height 

코드를 이해하면 아주 간단하지만 초보자를위한 가장 직관적 인 스크립트는 아닐 것입니다..

더 많은 코드 스 니펫과 샘플 데모가 필요한 경우 Rough.js 홈페이지를 확인하십시오.. 학습을 시작하고 재 작업 할 수있는 코드 스 니펫을 찾을 수있는 완벽한 장소입니다..

또한 추가 기능에 대한 질문이나 제안 사항이 있으면 Twitter @preetster에서 Rough.js 작성자에게 메시지를 보낼 수 있습니다..