디자이너 개발로그

Canvas에서 가장 기본적인 드로잉 개체는 역시 '선'일 것이다. 선은 크게 직선과 곡선으로 나뉘는데, 먼저 직선부터 살펴보고자 한다.직선을 그릴 때에는 간단하게 lineTo라는 메소드를 사용하면 된다. 직선을 그릴 때 필요한 것은 시작점과 끝점인데, 시작점은 현재위치가 되므로, lineTo 메소드는 끝점의 좌표만을 인자로 한다. 즉, lineTo(x,y)를 하면 x,y를 향해 선을 그리게 된다. 시작점은 (0,0)이 기본인데, 아무 것도 그리지 않고 시작점을 그리기 위해서 moveTo를 사용할 수 있다. Canvas의 호출부터 하면 아래와 같다. (HTML 문법)(10,10)에서 (90,90)으로 선을 그렸는데 아무 것도 보이지 않는다. 선의 색깔과 그리기 명령이 빠졌기 때문이다. 재미있는 것은 선을..

최근 참여 중인 프로젝트에서 SVG 못지 않게 많은 부분을 차지하고 있는 것이 바로 이 Canvas인데, 그 전에도 QML쪽에서 어떤 요소들을 그릴 때 가볍게는 사용해 본 적이 있지만 아주 본격적으로 써본 적은 없어서 많은 어려움을 겪었었고, 지금도 살짝 남아있다. Canvas에 대해서도 공부해보면서 그 기록을 남기고자 한다.Canvas API는 Javascript를 활용해 그림을 그리는 API(Application Program Interface)로, 주로 2D 그래픽에 초점을 두고 있으나 3D 그래픽도 제한적으로 지원하는 인터페이스이다. 때문에 Javascript 문법을 많이 따르며, Javascript 숙련도가 높으면 비교적 쉽게 다룰 수 있는 API이다.HTML의 엘리먼트나 QML의 Canvas..