croquis.js

croquis.js는 누구나 쉽게 자신만의 드로잉툴을 개발할 수 있도록 도와줍니다.

레이어 만들기

다음과 같이 레이어를 생성합니다:

// 레이어를 만들기 전에 먼저 그림판의 가로세로 크기를 지정해야 합니다.
croquis.setCanvasSize(400, 300); // 크기는 픽셀 단위로 지정됩니다.
croquis.addLayer(); // 레이어를 추가합니다.
// 레이어를 조작하기 전에 조작할 레이어의 인덱스를 지정해줘야 합니다.
croquis.selectLayer(0); // 가장 처음에 생성한 레이어의 인덱스는 0입니다.
// 레이어는 기본적으로 아무 것도 그려져있지 않은 투명한 상태로 생성됩니다.
// 다음과 같이 레이어를 하얀색으로 채워봅시다:
croquis.fillLayer('#fff');

아직도 화면에 아무 것도 보이지 않는다면 아마 html 문서의 기본 배경 색상이 하얀색이기 때문에 그림판이랑 구분이 되지 않는 것이기 때문일 겁니다.

문서의 배경 색상을 회색으로 바꾸면 하얀색 캔버스가 모습을 드러낼 것입니다:

document.body.style.backgroundColor = '#888';

댓글

댓글 본문