쟁이? 쟁이!

개발자로 일하다 보면, 개인 프로젝트 욕심도 생기고, 자기 사업하고 싶으신 분들 많으시리라고 생각됩니다.
물론 본인이 포토샵도 좀 하고, 디자인 감각이 있더라도, 전문 디자이너가 완성한 웹사이트와 개발자가 만든 웹사이트는 제3자 입장에서 차이가 나기 나름입니다.

그래서 개발자는 비즈니스와 백엔드에 집중하고, 디자인은 디자이너에 맡기는게 맞다고 생각합니다.
제가 수소문 끝에 찾은 다지인 사이트를 소개합니다.
Google 에서 themeforest(테마포레스트)를 검색하면, 다양한 디자인 사이트가 나옵니다.
비용도 $8 시작하며, 웬만한 웹페이지 및 모바일 페이지를 구할 수 있습니다.

저도 여기서 디자인 사이트를 구매해서 개인홈페이지를 제작중입니다. 한번 살펴보는것도 좋을 거 같습니다.

지난번 시간에 캔버스에 대해 간단하게 알아보았습니다. 이번에는 이 캔버스를 이용해서 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라는 글씨가 브라우져에서 보일것입니다.

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

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

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

감사합니다.

오늘은 Html5에서 지원하는 캔버스(canvas) 객체를 사용해보도록 하겠습니다.

<canvas> 와 같은 형태로 html 의 엘리먼트형태로 제공되서 input tag 처럼 편하게 사용할 수 있습니다.
캔버스는 그래픽스를 활용해 html을 활용해서 웹에서 그림을 그릴수 있습니다.

지원하는 브라우저는 크롬,인터넷익스플로어, 사파리, 오페라등 대부분 브라우저에서 지원합니다. 이는 모바일에서도 원할히 동작한다는 것을 의미합니다.

캔버스 사용시 장점을 나열해보겠습니다.
1. 당연한 이야기 지만, 글자를 입력하고, 다양한 글꼴이나, 색깔을 지정할 수 있습니다.
2. 그래픽스를 그릴 수 있습니다. 이미지라던지, 차트를 넣을수 있습니다.
3. 애니메이션 효과를 넣을 수 있습니다. 예를 들어 캔버스에 사각형을 넣고, 좌우로 움직이게 할 수 있습니다.
4.자바스크립트의 이벤트등을 활용할 수 있습니다. 이러한 요건 때문에, 간단한 게임 제작도 가능합니다.

캔버스를 html에서 사용하려면, 아래와 같은 엘리먼트를 적용하면 됩니다.
<canvas id=“canvas1” width=“200” height=“100” style=“border:1px; solid: #ffd800;>”</canvas>

매우 당연한 엘리먼트를 추가하였습니다.
이제 브라우저에서 실행하면, 노란색 테두리를 가진 사각형이 생성되었습니다.!!

다음 시간에는 이 사각형 안에 다양한 도형을 넣어보도록 하겠습니다.