html 5에서 새로 지원하는 <canvas> 태그에 대해서 알아 보자.
이 태그는 canvas를 생성하고 그 위에 그림을 그릴 수 있도록 지원한다.
쉽게 말하면 그림판 태그라고 생각해 버리자.
그림판을 선언하고 그 그림판에 대해서 원하는 그림을 넣거나 선, 곡선, 사각형 등을 그릴 수 있다.
canvas는 이미지 같은 것이 아니다. 실제 브라우저에 의해서 client 스크립트로 그려진 것이다. java script의 함수로 그릴 수 있기 때문에 애니매이션이 가능하다.
먼저 이해하기 쉽게 예를 들어 보자
(지금 부터 보이는 예는 보고있는 브라우져가 예전 것이라면 정상적으로 작동하지 않을 수 있다. html5는 현재도 진행되고 있는 web표준이며 실제 구현되지 않은 기능들도 많이 있다. ie보다는 구글 chrome 최신 버전을 깐다면 확실히 실행 될 것이다.)
아래 링크에서 run code라는 버튼을 클릭해 보면 블럭 깨기 게임이 실행 된다.
flash게임이 아니라 java script로 <canvas> 위에 구현된 것이다.
http://billmill.org/static/canvastutorial/index.html
최근 html5에 대해서 알아보기 위해 아래 책을 읽었고 책이 괜찮다.
이 책에 나오는 대부분의 내용을 web에서 발견했다.
바로 아래 링크인데 위 책의 실제 저자인 마크 필그림(Mark Pilgrim)이 만든 페이지다. 내용도 똑같다. 영어가 힘들지 않다면 가서 보자
http://diveintohtml5.org/
그 중에 canvas에 대해서 이야기하고 있으니
Let’s Call It a Draw(ing Surface)
부분을 읽어보면 canvas가 어떻게 쓰이는지 쉽게 알 수 있을 것이다.
아래는 그냥 간단히 그려본 그림이다. 저장소의 상황을 나타내 본 것이다.
서버측에서 data로 그려준다면 모든 저장소가 현재 얼마나 사용되고 있는지 알 수 있을 것이다.
이 태그는 canvas를 생성하고 그 위에 그림을 그릴 수 있도록 지원한다.
쉽게 말하면 그림판 태그라고 생각해 버리자.
그림판을 선언하고 그 그림판에 대해서 원하는 그림을 넣거나 선, 곡선, 사각형 등을 그릴 수 있다.
canvas는 이미지 같은 것이 아니다. 실제 브라우저에 의해서 client 스크립트로 그려진 것이다. java script의 함수로 그릴 수 있기 때문에 애니매이션이 가능하다.
먼저 이해하기 쉽게 예를 들어 보자
(지금 부터 보이는 예는 보고있는 브라우져가 예전 것이라면 정상적으로 작동하지 않을 수 있다. html5는 현재도 진행되고 있는 web표준이며 실제 구현되지 않은 기능들도 많이 있다. ie보다는 구글 chrome 최신 버전을 깐다면 확실히 실행 될 것이다.)
아래 링크에서 run code라는 버튼을 클릭해 보면 블럭 깨기 게임이 실행 된다.
flash게임이 아니라 java script로 <canvas> 위에 구현된 것이다.
http://billmill.org/static/canvastutorial/index.html
최근 html5에 대해서 알아보기 위해 아래 책을 읽었고 책이 괜찮다.
이 책에 나오는 대부분의 내용을 web에서 발견했다.
| |||||||||||
바로 아래 링크인데 위 책의 실제 저자인 마크 필그림(Mark Pilgrim)이 만든 페이지다. 내용도 똑같다. 영어가 힘들지 않다면 가서 보자
http://diveintohtml5.org/
그 중에 canvas에 대해서 이야기하고 있으니
Let’s Call It a Draw(ing Surface)
부분을 읽어보면 canvas가 어떻게 쓰이는지 쉽게 알 수 있을 것이다.
아래는 그냥 간단히 그려본 그림이다. 저장소의 상황을 나타내 본 것이다.
서버측에서 data로 그려준다면 모든 저장소가 현재 얼마나 사용되고 있는지 알 수 있을 것이다.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="100" height="200" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF6666";
cxt.fillRect(0,150,100,200);
cxt.fillStyle="#33FF33";
cxt.font = "20pt Arial";
cxt.fillText("jrs1331", 5, 90);
</script>
</body>
</html>
위에서 보는 것과 같이 <canvas> 태그 내의 문장은 html5의 <canvas>를 지원하지 않는 브라우저에서 보여질 text이다.
자바 스크립트 내에서 canvas의 context를 얻어서
아래와 같이 그림을 그린다.
그럼 저렇게 된다. 지금 어딜 나가봐야되서 이만 쓴다.
자바 스크립트 내에서 canvas의 context를 얻어서
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d"); 아래와 같이 그림을 그린다.
cxt.fillStyle="#FF6666"; (붉은 색 지정)
cxt.fillRect(0,150,100,200); (canvas아래에 붉은 색으로 사각형을 그린다.)
cxt.fillStyle="#33FF33"; (녹색 지정)
cxt.font = "20pt Arial"; (글씨 font 지정)
cxt.fillText("jrs1331", 5, 90); (text를 쓴다.)그럼 저렇게 된다. 지금 어딜 나가봐야되서 이만 쓴다.
'Web > Html5' 카테고리의 다른 글
| Html 5에 대해서 (0) | 2011.04.22 |
|---|