반응형
HTML5 에서는 브라우저에 도형을 그리거나 이것을 움직이거나 하는 일들을 할 수 있습니다.
제가 느끼기엔 자바에 있는 Swing 이랑 비슷한 개념인것 같습니다.
이름에서 알수 있듯이 그림 그릴때 사용하는 캔버스처럼 브라우저에 캔버스를 놓고 그 캔버스 위에 그림을 그리는 겁니다.
HTML5에서는 이 Canvas라는 판만 깔아 놓고 실제 그림 그리는 작업은 JavaScript 에서 합니다.
이제 HTML5의 Canvas를 이용해 보겠습니다.
먼저 HTML 파일을 만들어 주세요. (저는 canvas01.html로 했습니다.)
<!doctype html>
<html lang="en">
<head>
<title> Dougy's HTML5 HTML5 Canvas</title>
<meta charset="utf-8"/>
<script src="canvasdoug01.js"></script>
</head>
<body>
<section id="main">
<canvas id="canvas" width="600" height="400"
If you can see this. No good. get google chrome browser to see html5 canvas.
</canvas>
</section>
</body>
</html>
이 코드가 HTML5로 브라우저에 판을 깔아 놓은 예제 입니다.
canvas 태그 사이에 있는 문장은 브라우저가 HTML5를 지원하지 않는 경우 나오게 됩니다. 만약에 지원하게 된다면 나오지 않습니다.
canvas 는 <canvas></canvas> 로 선언되고 width와 height를 지정할 수 있습니다.
그리고 위 코드에서는 id를 canvas로 주었습니다.
style은 태그내에서 CSS 효과를 주는 건데요. 브라우저로 볼 때 테두리를 만들어서 볼 캔버스 크기를 알아볼 수 있도록 하기 위해서 그냥 넣었어요.
안 그러면 그냥 하얗게만 보이거든요.
브라우저에 캔버스가 저만큼 만들어 졌어요.
이제 저 캔버스 안에 자바스크립트를 가지고 그림을 그리거나 간단한 애니메이션을 만들거나 할 건데요.
자바스크립트 이름은 canvasdoug01.js 로 했습니다.
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.strokeRect(10,10,100,200);
canvas.fillRect(150,50,100,200);
}
window.addEventListener("load",doFirst,false);
함수 doFirst()를 만들었구요. 그 안에 그림 그리라는 명령들을 넣었습니다.
이 doFirst()는 load 될 때 불려지도록 했구요. 맨 아래 리스너에 대한 설명은 이전 글에서 했기 때문에 생략할께요.
우선 x 라는 지역변수를 만들고 거기에 html 안에 id가 canvas 인 태그를 대입했습니다. 이제 이 x 가지고 html 안에 있는 id가 canvas 인 태그를 맘대로 요리할 수 있게 됐습니다.
다음은 canvas 라는 global 변수를 만들고 그 안에 x에 담을 내용은 2d 라고 알려 줬습니다.
아직 2d 밖에 지원이 안 되는데 나중에 기술이 발달되면 3d,4d 도 사용할 수 있게 되겠네요.
자바스크립트에서는 지역변수를 선언할 때 var를 사용합니다. 이 지역변수 전역변수(global variable)에 대한거는 CoronaSDK 관련 글에서 자세히 그것도 반복하면서 언급했던걸로 기억하는데요.
일단 지역변수는 그 함수 안에서 밖에 사용못합니다. 하지만 전역변수는 함수 밖에서도 사용할 수 있지요.
프로그램을 많이 만들다보면 지역변수,전역변수를 어떻게 유용하게 사용할 지 몸으로 익히시게 될 겁니다.
그 다음에 있는 코드들이 캔버스에 그림을 그리는 코드들입니다.
처음엔 외곽선이 있는 사각형이구요. 괄호 안에 있는 내용들은 x,y 좌표와 width와 height 입니다.
두번째는 색이 안에 채워진 사각형입니다.
이런식으로 HTML5에서는 html 파일에서 canvas를 만들어 놓고 javascript에서 그 canvas 안에 그림을 그리게 됩니다.
다음은 지우는 방법에 대해 공부합니다.
doFirst 함수 안에 아래 두 줄을 넣어 주세요.
canvas.clearRect(70,30,130,50);
canvas.clearRect(160,100,30,60);
clearRect 는 지우라는 명령입니다. canvas에 뭐가 그려져 있던 이 사각형안에 내용은 모두 지우라는 겁니다.
이제 색을 좀 넣어볼까요?
doFirst를 아래와 같이 수정해 보세요.
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.fillStyle="blue";
canvas.strokeStyle="red";
canvas.strokeRect(10,10,100,200);
canvas.fillRect(150,50,100,200);
canvas.clearRect(70,30,130,50);
canvas.clearRect(160,100,30,60);
}
fillStyle 하고 strokeStyle 에 색을 주었습니다. 그러면 fillRect에는 파란색이 그리고 strokeRect에는 빨간 테두리선이 적용될 겁니다.
색을 주었으니 이제 그라데이션 효과 주는 법도 배워볼까요?
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
var g = canvas.createLinearGradient(0,0,100,200);
g.addColorStop(.0,"blue");
g.addColorStop(1,"red");
canvas.fillStyle=g;
canvas.fillRect(0,0,100,200);
canvas.strokeStyle="red";
canvas.strokeRect(10,10,100,200);
canvas.fillRect(150,50,100,200);
canvas.clearRect(70,30,130,50);
canvas.clearRect(160,100,30,60);
지역변수 g에 그라데이션을 대입했습니다.
그리고 파란색에서 시작해서 빨간색으로 끝나구요.
이 g를 fillStyle에 적용했습니다. 이렇게 되면 모든 fill 스타일엔 다 적용될 겁니다.
보시면 새로만든 사각형에 그라데이션 효과가 잘 적용 됐죠? 뿐만아니라 아까 만들었던 fillRect 에도 살짝 적용된걸 보실 수 있습니다.
오늘은 여기까지 하고 다음에 계속해서 HTML5의 canvas에 대해서 알아보겠습니다.
제가 느끼기엔 자바에 있는 Swing 이랑 비슷한 개념인것 같습니다.
이름에서 알수 있듯이 그림 그릴때 사용하는 캔버스처럼 브라우저에 캔버스를 놓고 그 캔버스 위에 그림을 그리는 겁니다.
HTML5에서는 이 Canvas라는 판만 깔아 놓고 실제 그림 그리는 작업은 JavaScript 에서 합니다.
이제 HTML5의 Canvas를 이용해 보겠습니다.
먼저 HTML 파일을 만들어 주세요. (저는 canvas01.html로 했습니다.)
<!doctype html>
<html lang="en">
<head>
<title> Dougy's HTML5 HTML5 Canvas</title>
<meta charset="utf-8"/>
<script src="canvasdoug01.js"></script>
</head>
<body>
<section id="main">
<canvas id="canvas" width="600" height="400"
style="border:solid 1px #000000">If you can see this. No good. get google chrome browser to see html5 canvas.
</canvas>
</section>
</body>
</html>
이 코드가 HTML5로 브라우저에 판을 깔아 놓은 예제 입니다.
canvas 태그 사이에 있는 문장은 브라우저가 HTML5를 지원하지 않는 경우 나오게 됩니다. 만약에 지원하게 된다면 나오지 않습니다.
canvas 는 <canvas></canvas> 로 선언되고 width와 height를 지정할 수 있습니다.
그리고 위 코드에서는 id를 canvas로 주었습니다.
style은 태그내에서 CSS 효과를 주는 건데요. 브라우저로 볼 때 테두리를 만들어서 볼 캔버스 크기를 알아볼 수 있도록 하기 위해서 그냥 넣었어요.
안 그러면 그냥 하얗게만 보이거든요.
이제 저 캔버스 안에 자바스크립트를 가지고 그림을 그리거나 간단한 애니메이션을 만들거나 할 건데요.
자바스크립트 이름은 canvasdoug01.js 로 했습니다.
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.strokeRect(10,10,100,200);
canvas.fillRect(150,50,100,200);
}
window.addEventListener("load",doFirst,false);
함수 doFirst()를 만들었구요. 그 안에 그림 그리라는 명령들을 넣었습니다.
이 doFirst()는 load 될 때 불려지도록 했구요. 맨 아래 리스너에 대한 설명은 이전 글에서 했기 때문에 생략할께요.
우선 x 라는 지역변수를 만들고 거기에 html 안에 id가 canvas 인 태그를 대입했습니다. 이제 이 x 가지고 html 안에 있는 id가 canvas 인 태그를 맘대로 요리할 수 있게 됐습니다.
다음은 canvas 라는 global 변수를 만들고 그 안에 x에 담을 내용은 2d 라고 알려 줬습니다.
아직 2d 밖에 지원이 안 되는데 나중에 기술이 발달되면 3d,4d 도 사용할 수 있게 되겠네요.
자바스크립트에서는 지역변수를 선언할 때 var를 사용합니다. 이 지역변수 전역변수(global variable)에 대한거는 CoronaSDK 관련 글에서 자세히 그것도 반복하면서 언급했던걸로 기억하는데요.
일단 지역변수는 그 함수 안에서 밖에 사용못합니다. 하지만 전역변수는 함수 밖에서도 사용할 수 있지요.
프로그램을 많이 만들다보면 지역변수,전역변수를 어떻게 유용하게 사용할 지 몸으로 익히시게 될 겁니다.
그 다음에 있는 코드들이 캔버스에 그림을 그리는 코드들입니다.
처음엔 외곽선이 있는 사각형이구요. 괄호 안에 있는 내용들은 x,y 좌표와 width와 height 입니다.
두번째는 색이 안에 채워진 사각형입니다.
다음은 지우는 방법에 대해 공부합니다.
doFirst 함수 안에 아래 두 줄을 넣어 주세요.
canvas.clearRect(70,30,130,50);
canvas.clearRect(160,100,30,60);
clearRect 는 지우라는 명령입니다. canvas에 뭐가 그려져 있던 이 사각형안에 내용은 모두 지우라는 겁니다.
이제 색을 좀 넣어볼까요?
doFirst를 아래와 같이 수정해 보세요.
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
canvas.fillStyle="blue";
canvas.strokeStyle="red";
canvas.strokeRect(10,10,100,200);
canvas.fillRect(150,50,100,200);
canvas.clearRect(70,30,130,50);
canvas.clearRect(160,100,30,60);
}
fillStyle 하고 strokeStyle 에 색을 주었습니다. 그러면 fillRect에는 파란색이 그리고 strokeRect에는 빨간 테두리선이 적용될 겁니다.
색을 주었으니 이제 그라데이션 효과 주는 법도 배워볼까요?
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
var g = canvas.createLinearGradient(0,0,100,200);
g.addColorStop(.0,"blue");
g.addColorStop(1,"red");
canvas.fillStyle=g;
canvas.fillRect(0,0,100,200);
canvas.strokeStyle="red";
canvas.strokeRect(10,10,100,200);
canvas.fillRect(150,50,100,200);
canvas.clearRect(70,30,130,50);
canvas.clearRect(160,100,30,60);
지역변수 g에 그라데이션을 대입했습니다.
그리고 파란색에서 시작해서 빨간색으로 끝나구요.
이 g를 fillStyle에 적용했습니다. 이렇게 되면 모든 fill 스타일엔 다 적용될 겁니다.
오늘은 여기까지 하고 다음에 계속해서 HTML5의 canvas에 대해서 알아보겠습니다.
반응형
'WEB_APP > HTML5' 카테고리의 다른 글
| HTML5 Web Storage -01- (2) | 2011.12.27 |
|---|---|
| HTML5 드래그 앤 드롭 하기 Drag and Drop (0) | 2011.12.26 |
| HTML5 Canvas 이용하기 - 04 - Image/Animation (0) | 2011.12.24 |
| HTML5 Canvas 이용하기 - 03 - (0) | 2011.12.24 |
| HTML5 Canvas 이용하기 - 02 - 다각형,글자,그림자 (0) | 2011.12.22 |
| HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript (2) | 2011.12.19 |
| HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript (2) | 2011.12.18 |
| HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS (0) | 2011.12.17 |
| HTML5로 비디오 보여주기 Video Tag (0) | 2011.12.17 |
| JavaScript 맛보기 (0) | 2011.12.16 |