EaselJS Ticker를 활용한 HTML5 Canvas 선 그리기 방법

EaselJS란 무엇인가?

EaselJS는 HTML5 Canvas 요소를 손쉽게 다룰 수 있도록 설계된 자바스크립트 라이브러리입니다. CreateJS 스위트의 핵심 모듈 중 하나로, 게임 개발, 인터랙티브 그래픽, 데이터 시각화 등 다양한 분야에서 널리 활용되고 있습니다.

Ticker 메서드로 선 그리기

EaselJS의 Ticker는 일정한 간격(프레임)마다 지정된 함수를 반복 호출하는 애니메이션 루프 역할을 합니다. 매 프레임마다 좌표를 조금씩 이동시키며 선을 그리면, 마치 애니메이션처럼 선이 자연스럽게 늘어나는 효과를 얻을 수 있습니다.

1. Shape 객체 생성 및 스타일 설정

먼저 선을 담당할 Shape 객체를 만들고, 선의 굵기와 색상, 시작 좌표를 지정합니다.

var myLine = new createjs.Shape();

myLine.graphics.setStrokeStyle(4);      // 선 두께를 4px로 설정
myLine.graphics.beginStroke(color);     // 선 색상 지정
myLine.graphics.moveTo(startX, startY); // 시작 좌표로 펜 이동

2. 프레임마다 선 연결하기

y좌표를 1px씩 증가시킨 뒤, 새로운 좌표까지 선을 이어 그립니다.

startY++; // y좌표를 1px씩 증가

myLine.graphics.lineTo(startX, startY); // 새 좌표까지 선 연결
myLine.graphics.endStroke();            // 선 그리기 종료

3. Ticker로 애니메이션 루프 실행

위 코드를 Ticker에 등록하면 매 프레임마다 자동으로 실행되어 선이 계속 그려집니다.

createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.framerate = 60; // 초당 60프레임

function tick(event) {
  // 선 그리기 코드가 여기서 매 프레임 실행됩니다.
  stage.update();
}

이렇게 하면 startY 값이 매 프레임 1씩 증가하면서 세로 방향으로 선이 끊임없이 이어져 그려집니다. setStrokeStyle()은 선의 굵기를, beginStroke()는 색상을 결정하며, moveTo()와 lineTo()의 조합을 응용하면 곡선이나 복잡한 경로도 자유롭게 표현할 수 있습니다.