Canvas란

간단하게 설명하자면 HTML5의 canvas는 그래픽들을 위한 컨테이너 입니다.
선, 사각형, 원, 문자, 이미지 등을 추가하는 메서드를 지원하며, canvas엘리먼트를 정의 후 자바스크립트를 이용하여 그림을 그려줍니다.

<canvas id="myCanvas" width="200" height="100"></canvas>

html에 다음과 같이 정의 합니다.
도형 등은 자바스크립트를 이용하여 그려 줄 수 있습니다.

w3s html5_canvas
하지만 급하게 canvas를 사용하고 싶거나 애니메이션을 적용하고 싶을 경우 처음부터 공부해야 하는 어려움이 있습니다.
그럴 때 아래에서 소개할 오픈소스 라이브러리를 사용하여 빠르게 내 사이트에 적용 시킬 수 있습니다.

Brush.js

Brush.JS 소개
Brush.js는 canvas 사용을 도와주는 라이브러리 입니다.
간단한 그리기를 비롯해 애니메이션 기능도 지원해 주고 있습니다.

var canvas = new Brush('canvasID'); 
canvas.Circle([ 
     { 
          ... 
     } 
]); 
canvas.Line([ 
     { 
          ... 
     } 
])
...

라이브러리를 추가하고 위와같이 사용할 수 있습니다.
자세한 사용법은 아래 문서를 통하여 확인 하실 수 있습니다

Brush.JS GitHub & 한글문서

적용 예

반딧불 예제
위 경로에서 간단한 예제를 확인 할 수 있습니다.
canvas로 수백개의 반딧불을 구현한 예제입니다.

GNIN
제가 만든 간단한 포스트 사이트 배경에도 적용시켜 보았습니다.
랜덤한 위치로 지정된 10개 가량의 원이 배경에서 떠오르고 있습니다.

공식 문서에서 제공하는 예제를 보시면 간단하게 적용 시킬 수 있습니다.

마치며

문서 작성중에 확인해보니 제가 사용할 때는 없던 기능들이 그새 추가 되었습니다.
지금도 활발하게 개발 중인 라이브러리 인듯 합니다. 

아래 Brush.js 개발자 블로그에서 위 예제 말고도 다양한 정보도 확인 하실 수 있습니다. 

개발자 블로그 : Yuby’s Lab