쟁이? 쟁이!

지난번 시간에 캔버스에 대해 간단하게 알아보았습니다. 이번에는 이 캔버스를 이용해서 javascript 사용해서 프로그래밍적으로 도형을 만들어 보도록 하겠습니다.
지난시간에 만들었던 캔버스의 id가 myCanvas입니다.

Jquery ready 이벤트 핸들러에서 코딩을 시작하시면 되겠습니다.(html dom이 모두 로드된 후, 작업시작~)
$(document).ready(function(){
//캔버스 엘리먼트를 가져옵니다.
var canvas = document.getElementById(“myCanvas”);
//드로잉 객체를 생성합니다.
var ctx = canvas.getContent(“2d”);
//Path객체로 삼각형을 그립니다.
ctx.beginPath();
Ctx.moveTo(50,10);//시작점을 지정합니다.
Ctx.lineTo(20,100);//패스가 이어질 점을 지정합니다.
Ctx.lineTo(80,100);
Ctx.lineTo(50,10);
Ctx.stroke();
Ctx.fill();//디폴트인 검정색으로 삼각형을 채웁니다.

ctx.fillStyle = “#FF0000”;
//사각형을 그립니다.
Ctx.fillRect(10,150,150,150);
//사각형의 일부 영역을 지웁니다.
Ctx.clearRect(10,150,50,50);

//시작점을 잡고 선을 그립니다.
Ctx.moveTo(10,320);
Ctx.lineTo(300,400);
Ctx.stroke();

//글씨를 쓸수 있습니다.
Ctx.font = “30px Arial”;
Ctx.fillText(“Hello World”, 10, 450);

});

이와같이 코딩을 하고 브라우저를 띄우면, 검은색 삼각형, 일부가 띄어져 나간 사각형, 대각선, Hello World라는 글씨가 브라우져에서 보일것입니다.

나온지 오래된 기술이지만, 상용 컴포넌트로 커버가 안되는 것은 직접 그려서 해결해볼수도 있겠습니다.

캔버스는 브라우저의 그림판이라고 불릴만큼, 그림판에서 그릴수 있는 것은 다 구현된다고 보시면 됩니다.

더 궁금하신 사항은 아래 댓글로 남겨주세요.~~

감사합니다.