어쩌다보니 그림판에 대한 기능을 구현하게 되었다.
성능 개선을 위해서 이것저것 다 해봤지만 결국은 Fail... 마음이 아프다.
Canvas 를 간단하게 설명해보자면 웹상에서 그래픽을 그리기 위한 하나의 엘리먼트라고 할 수 있다.
정확히는 Canvas 는 하나의 컨테이너일 뿐이고,
컨테이너에 그리기 위해선 JavaScript 를 이용해서 그려줘야 한다.
(SVG 라고 다른 성향의 엘리먼트가 있다. 필요하면 찾아보자.)
Canvas 는 비트맵 기반, SVG 는 벡터 기반이니 참고하도록 하자.
간단한 예제를 통해서 캔버스의 사용을 익혀보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!-- canvas.html --> <!DOCTYPE html> <html> <head> <title>Canvas Painter</title> <style type="text/css"> canvas{border: 1px solid black}; </style> </head> <body> <div> <canvas id="canvas" width="500" height="500"> </canvas> </div> <script src="canvas.js"></script> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 | // canvas.js window.onload = function(){ var canvas = document.getElementById("canvas"); draw(canvas); } function draw(canvas){ var ctx = canvas.getContext("2d"); ctx.moveTo(30, 100); ctx.lineTo(80, 100); ctx.stroke(); } | cs |
HTML 파일에 대한 설명은 생략
코드를 보면 간단하게 예측할 수 있다.
직선을 그리는 법을 알았으니, 마우스 이벤트에 따라 선을 그려주는 펜 기능을 만들어보자.
먼저 canvas.js 의 뼈대를 만든다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | // canvas.js var pos = { drawable: false, x: -1, y: -1 }; var canvas, ctx; window.onload = function(){ canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); canvas.addEventListener("mousedown", listener); canvas.addEventListener("mousemove", listener); canvas.addEventListener("mouseup", listener); canvas.addEventListener("mouseout", listener); } function listener(event){ switch(event.type){ case "mousedown": initDraw(event); break; case "mousemove": if(pos.drawable) draw(event); break; case "mouseout": case "mouseup": finishDraw(); break; } } | cs |
각각의 이벤트를 전부 설정했고, 각각 이벤트마다 행동을 정의하면
자 그럼 해당 이벤트마다 코드를 작성하자.
initDraw() : 클릭 했을 때 버튼을 누른 순간 down이벤트 발생하고, moveTo() 를 이용하여 해당 좌표로 pos 를 변경시켜준다.
draw() : down상태에서 이동을 하면 move이벤트가 발생하고, lineTo() 를 이용해서 라인을 그려준다.
finishDraw() : 마우스가 캔버스에서 벗어나면 out 이벤트, 버튼을 떼는 순간 up 이벤트가 발생하며, 그리기를 중지한다.
각 함수를 구현해본다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | function initDraw(event){ ctx.beginPath(); pos.drawable = true; var coors = getPosition(event); pos.X = coors.X; pos.Y = coors.Y; ctx.moveTo(pos.X, pos.Y); } function draw(event){ var coors = getPosition(event); ctx.lineTo(coors.X, coors.Y); pos.X = coors.X; pos.Y = coors.Y; ctx.stroke(); } function finishDraw(){ pos.drawable = false; pos.X = -1; pos.Y = -1; } function getPosition(event){ var x = event.pageX - canvas.offsetLeft; var y = event.pageY - canvas.offsetTop; return {X: x, Y: y}; } | cs |
beginPath() 라는건 새로운 경로를 지정할때 사용한다.
pos.drawable 은 클릭 상태인지 확인하는 변수다.
(event 객체를 보면 button, buttons 라는 properties 가 있다. 현재는 좌,우 클릭 전부 가능하지만, 나중에는 저 properties 를 활용해서 다른 기능을 넣어보자.)
간단한 기능만 구현이 되었지만, 나머지도 응용의 연속이다.
사각형 그리기, 원 그리기, 되돌리기 등등 여러가지 기능을 직접 구현해보자.
캔버스 예제:
'Programing > Web' 카테고리의 다른 글
| [Web Http] CORS 란 무엇인가 ? (0) | 2017.01.28 |
|---|
