HTML5 그림 그리기 - canvas 내에서 속성 바꾸기

참고 페이지 : http://msdn.microsoft.com/en-us/library/ff974918(v=VS.85).aspx

결국은 php 내에서 편하게 그림을 그리기 위해서는 HTML5 규격을 사용할 수 밖에 없다는 결론에 도달했다. 뭐 이것도 일일히 지정을 해 줘야 하기 때문에 GD를 사용하는 것 만큼이나 귀찮지만, GD의 경우 완전히 그림을 그려서 그걸 파일로 저장하고 불러오는 반면 HTML5에서는 <canvas> 태그를 사용하면 되기 때문에 무척 간단하게 그릴 수 있다.

문제는 하나의 canvas 내에서 서로 다른 속성들을 지정할 때인데, 즉 하나의 선을 검게 그려놓고 다른 선은 녹색으로 그린다던가 하는 부분이다. 이게 의외로 웃기는데, 단 한줄 .beginPath()를 써 주지 않으면 마구 겹쳐서 그려준다. 아래 javascript 파일인 canvas00.js의 예를 보자.


function doFirst() {
// 개체 선언
var x = document.getElementById('canvas');
canvas = x.getContext('2d');

// 글자를 그린다
canvas.textAlign="start";
canvas.fillText("2005", 0, 180);
canvas.textAlign="end";
canvas.fillText("2011", 300, 180);

// 바로 이 부분, 반드시 beginPath()를 선언해 줘야 한다.
canvas.beginPath();
canvas.moveTo(0, 170);
canvas.lineTo(300, 170);
canvas.stroke();

// 하나를 그리고 나면 다음 것을 다른 색으로 그리기 위해 다시 beginPath()를 선언한다.
canvas.beginPath();
canvas.strokeStyle="green";
canvas.moveTo(10, 165);
canvas.lineTo(50, 150);
canvas.lineTo(100, 110);
canvas.lineTo(200, 160);
canvas.lineTo(300, 100);
canvas.stroke();
}

// load drawing when page loads
window.addEventListener("load", doFirst, false);

위 참고페이지 설명에도 그렇고, 왜 멀쩡하게 있는 .closePath()는 사용하지 않는지 모르겠다.