이전 포스트에서 index.html, Nagarry.css를 만들었다.
이젠 Javascript파일 Nagarry.js를 추가해서 Canvas를 제어해 보겠다.
canvas는 말 그대로 뭔가를 그릴 수 있는 도화지 같은 바탕일 뿐이기에
크기 이외의 모든 것은 Javascript를 통해 이루어진다.
아래와 같은 index.html과 Nagarry.css파일을 준비하자.
(이전 포스트에서 작성했던 내용이다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Nagarry's HTML5</title>
<link type="text/css" rel="stylesheet" href="./css/Nagarry.css">
<script src="./script/Nagarry.js"></script>
</head>
<body>
<canvas id="CANVAS_1" width="800" height="480">
Sorry, Your browser doesn't support HTML5 Canvas.
</canvas>
</body>
</html>
@CHARSET "UTF-8";
body
{
background:#555555;
margin:20px;
}
#CANVAS_1
{
background:#ffffff;
border:1px solid #000000;
}
이제 아무 의심없이 아래와 같은 Javascript파일을 만들어보자.
var can1 = document.getElementById("CANVAS_1");
var context1 = can1.getContext("2d");
context1.fillStyle = "#ff0000";
context1.fillRect(50, 50, 360, 240);
이 javascript가 문제없이 동작한다면....
canvas내의 50, 50좌표에 360*240 크기의 붉은 사각형이 나타날 것이다.
(이 구문의 설명은 밑에서 하겠다)
브라우저를 통해 실행해보라.
지난 포스트에서 봤던거랑 달라진게 있는가???
없다. 붉은 사각형이 나타나지 않는다.
왜그럴까?
index.html파일을 다시 보겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Nagarry's HTML5</title>
<link type="text/css" rel="stylesheet" href="./css/Nagarry.css">
<script src="./script/Nagarry.js"></script>
</head>
<body>
<canvas id="CANVAS_1" width="800" height="480">
Sorry, Your browser doesn't support HTML5 Canvas.
</canvas>
</body>
</html>
javascript에서는 분명 "CANVAS_1"이라는 것을 당겨썼지만,
"CANVAS_1"보다 먼저 javascript가 호출되었기 때문이다.
달리말해 <canvas>태그가 정의된 후에 javascript가 정의되거나 호출되어야 한다는 것이다.
그래서 수정하자면 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Nagarry's HTML5</title>
<link type="text/css" rel="stylesheet" href="./css/Nagarry.css">
</head>
<body>
<canvas id="CANVAS_1" width="800" height="480">
Sorry, Your browser doesn't support HTML5 Canvas.
</canvas>
<script src="./script/Nagarry.js"></script>
</body>
</html>
수정후 브라우저를 통해 보면 이젠 사각형이 나올 것이다.
이제야 의도한 대로 동작한다.
그럼 javascript 문장을 살펴보겠다.
첫줄부터 마지막줄까지 설명한다.(이런 친절한 설명은 처음이자 마지막이 아닐까 싶다ㅎㅎㅎㅎ)
var can1 = document.getElementById("CANVAS_1");
var context1 = can1.getContext("2d");
context1.fillStyle = "#ff0000";
context1.fillRect(50, 50, 360, 240);
var can1 = document.getElementById("CANVAS_1");
can1이란 변수에 id가 "CANVAS_1"이라고 정의된 녀석을 대입한다.
이것으로 can1이 canvas가 되는것이다.
var context1 = can1.getContext("2d");
context1이란 변수에 canvas의 2d context를 대입한다.
context란 웹브라우저에서 제공하는 canvas용 그리기 영역이다.
하나의 canvas에는 하나의context가 있어, context와 canvas는 1:1매칭이 되고,
context를 통해 canvas에 이것 저것을 채워넣을 수 있다.
canvas의 다른 메서드는 젤 밑부분 "1)부가설명"을 보라.
context1.fillStyle = "#ff0000";
context에서 채우기 기능을 할 경우 채움색을 지정한다.
"#ff0000"이니 뭐든 채우기를 할 경우 붉은 색이 될 것이다.
context1.fillRect(50, 50, 360, 240);
사각형 채우기 기능을 한다.
x좌료 50, y좌표 50에서 시작하는 가로 360, 세로 240 사각형을 그린다.
자, 그럼 여기서 드는 의문.
<canvas>를 제어하는 javascript는 언제나 <canvas>태그 이후에 정의 되어야 하는가???
아니다. 방법이 있다.
<canvas>보다 앞에서 정의되더라도 얼마든지 제어할 수 있다.
다음 포스트에서 살펴보도록 하겠다.
---------------------------------------------------------------------------------------
1)부가설명
canvas의 메서드는 아래와 같다.
메서드 |
내용 |
getContext() |
canvas의 context를 반환한다. |
toDataURL(type, quality) |
데이터 URL을 반환한다. <img>태그의 src속성에 쓰일 수 있는데, 첫 인자인 type은 image/jpeg, image/png같은 이미지 타입을 지정한다. 두번째 인자인 quality는 0.0~1.0으로 이미지 품질수준을 지정한다. |
toBlob(callback, type, args...) |
캔버스의 이미지 파일을 나타내는 Blob을 생성한다. 첫 인자인 callback은 호출하는 함수, 두번째 인자인 type은 image/png같은 이미지 타입, 세번째 인자는 0.0~1.0으로 이미지 품질수준을 지정하고... 이미지 특성을 제어하기 위해 다른 인수를 추가할 수 있다. |
2)부가설명
HTML태그인 canvas의 속성은 딱 2가지 밖에 없다.
속성 | 내역 | 타입 | 기본값 |
width | canvas의 너비 | 음이 아닌 정수 | 300 |
height | canvas의 높이 | 음이 아닌 정수 | 150 |
아래와 같이 기술했다면, html을 통해 할 수 있는 모든것을 다한 셈이다.
<canvas id="CANVAS_1" width="800" height="480">Canvas지원하는 최신 브라우저 쓰세요</canvas>
Index.html