캔버스 ( html5 ) 그림 그리기
글이 길어질 것 같아 몇편에 나누어 쓸려고 합니다 간혹 개인 사정으로 인해 바로 업데이트 되지 않아도 양해 바랍니다
홈페이지에 쓸 요량으로 한 두어달 html5에서 지원하는 캔버스 그림 그리기를 파고 들었는데
알고 있는 한도내에서 저처럼 처음 접하신 분들에게 도움이 될수도 있겠다 싶어 방법론적인거와
그림 그리기 지우기, 만들면서 참고했던 유용한 사이트URL 등 몇가지를 올릴려고 합니다
캔버스( canvas ) 가 무엇인가?
캔버스 ( cnavas )는 html5에서 지원하는 그림 그리기의 일종이라 생각하면 됩니다
지원되는 형식을 2d로 하면 포토샵 마냥 그림그리기와 사진을 편집할수 있고
3d면 게임등 입체적인 영상을 볼수 있다 생각하시면 됩니다
더불어 요즘 나오는 브라우저는 대부분 그 기능을 지원하고 있습니다
그러나 아직 표준으로 자리 잡지 않았기에 다소 일반 태그마냥 쓰기엔 무리가 있을수도 있으며
브라우저도 최신 브라우저가 아니면 지원이 되지 않으므로 활발히 활성화될 시기를 구 버전들이 사장되는
2년 후 정도로 내다 보시면 되지 않을까 싶습니다
주요 브라우저에서 지원을 하고 있으니 아마 표준으로 자리를 잡으리라 봅니다
저 또한 2년 뒤 활성화를 내다보고 일종의 프로토 타입을 만드는 중이라 생각하며 하고 있습니다
현재 소스는 익스10에서 쓰기에 무리가 없고 9는 파일api등 충돌하는 부분이 다소 있으므로 익스10 기준으로 합니다
크롬, 사파리,파이어폭스, 오페라 최신 버전에서도 같은 결과를 보여줍니다
캔버스는 자바스크립트가 기반이며 파일 api등이 합해졌을 때 비로소 쓰기가 편합니다
파일 api에 대해서는 이미 웹에 쓰기에 부족함 없이 올라온 것이 많기에 이부분은 그냥 넘기겠습니다
또는 추후에 필요하다 판단되면 넣겠습니다
우선은 간단한 레이아웃입니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<style>
html{
margin:0px;
padding :0px;
}
body{
margin:0px;
padding :0px;
}
#contentsLAYER{ /* 콘텐츠 전체 위치 레이어 */
position : absolute;
top : 100px;
left : 250px;
width : 852px;
height : 502px;
background : yellow;
}
#canvasTOOL{ /* 그리기 툴이 담긴 레이어 */
position : absolute;
top : 0px;
left : 0px;
width : 140px;
height : 200px;
background : #eee;
border : 1px solid #ccc;
}
#canvasLAYER{ /* 캔버스가 담긴 레이어 */
position : absolute;
top : 0px;
left : 150px;
width : 702px;
height : 502px;
background : #fff;
}
position : absolute;
top : 0px;
left : 150px;
width : 702px;
height : 502px;
background : #fff;
}
#canvas1{ /* 캔버스 */
border : 1px solid #ccc;
}
border : 1px solid #ccc;
}
</style>
<script type="text/javascript">
// 캔버스 소스
</script>
</head>
<body>
</head>
<body>
<div id="contentsLAYER">
<div id="canvasTOOL">
</div>
</div>
<div id="canvasLAYER">
<canvas id="canvas1" width="700px" height="500px"></canvas>
</div>
</div>
</body>
</html>
그냥 간단한 레이아웃입니다
여기서 중요한 것은
<canvas id="canvas1" width="700px" height="500px"></canvas> 부분중 넓이와 높이가 지정이 되었다는 겁니다
캔버스는 임의적으로 넓이와 높이를 꼭 지정을 해줘야 합니다 스타일 태그로 넓이와 높이를 입히는게 아닌
실제적인 값을 태그로서 값을 지정하거나 자바스크립트로 값 지정을 해줘야 합니다
이부분이 안되면 소스가 먹히지 않습니다
캔버스api는 요즘 지원하기 시작해서 그런지 오류에 대해서
명확히 뱉어 내는게 그리 많지 않아서 디버깅이 간혹 까다로울수 있습니다
넓이와 높이를 지정해서 캔버스 즉 도화지를 그려줬으니 그 안에서 작업물을 그리면 됩니다
한가지 덧 붙이면 높이와 넓이를 1px이라도 달리 주면 현재까지 작업된 작업물이 전부 지워지게 되므로
캔버스를 초기화 할때 사용할 수도 있습니다
그러나 지울때 사용되어지는 api가 있으니 그걸 활용하는게 좀더 순리에 맞겠죠
두 가지 더 짚고 넘어간다면
캔버스를 지원하지 않는 브라우저등을 위해서 아이프레임등과 같이 닫는 태그를 해줍니다
일종의 권고 사항처럼 생각하시면 됩니다
<canvas>지원되지 않는 브라우저입니다 </cnavas>
또한
위에 html과 body 부분등에 패딩과 마진을 0 으로 줬습니다
그리 깊게 따지고 넘어갈 부분은 아니지만 그림 그리기이다 보니 마우스 포인터의 위치 영향을 받습니다
그러기에 마우스가 움직이는 위치와 그려지는 위치가 틀어졌다면 이와 같이 소스에서 쓰인 마진이나 패딩 혹은
다른 객체들의 마진이나 패딩 보더 등으로 인한 값의 차이 때문이니 꼭 알고 있어야 정신 건강에 편합니다
글이 길어지므로 이번 장은 여기까지 하고 다음은 일반적인 마우스 포인터에 의한 기본 그리기를 하겠습니다
아래의 그림은 제 홈에 쓸려고 현재 만들고 있는 canvas를 캡쳐해서 올린겁니다
이래 저래 뜯어 고치고 만들고 다시 손보고 하다 보니 아래의 소스를 가지고 작업물을 올릴수는 없습니다
다만 제시하고자 하는
방법론과 그림을 그리고 지우는 법 레이어 추가등 현재 제가 구현해서 쓸만하다 인정한 부분까지만
진행해야 서로가 불편하지 않을듯 싶습니다
너무 큰 기대는 실망으로 표출되기에 그래서 더 조심스럽기도 하지만 말하고자 하는 부분을 잘 글로 표출한다면
더 좋은 아이디어와 감각으로 아래의 기능보다 더 멋진걸 여러분도 만드실수 있으리라 봅니다
글을 보신 분들이 일종의 나도 만들수 있겠다는 자신감을 끌어 내기 위해 올린것이니 이해해
주시리라 봅니다
덧붙여 저도 이제 막 배우는 입장이라 분명 어긋나거나 틀린 부분이 있으리라 봅니다 이점에 대해서는
미리 양해를 구합니다 :)
|
댓글을 작성하시려면 로그인이 필요합니다.