<canvas>는 두개의 속성을 가진다. 

<canvas width="150" height="150></canvas>


사용자가 canvas를 지원하지 않는 브라우저를 사용을 할 경우를 위해 우리는 아래 코드와 같이 canvas태그사이에 대체문구를 써주는게 좋다.

<canvas id="canvas" width="150" height="150">
    지원하지 않는 브라우저 입니다.
</canvas>


기본적으로 캔버스를 생성하면 투명하기 때문에 잘 생성이 되었는지 확인이 힘들기 때문에 boder를 주어서 확인해보았다.

<style>
canvas{border: 1px solid black}
</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas demo</title>
<script>
var canvas, context;
window.addEventListener("load", initEvent, false);
//윈도우객체가 로딩되면 initEvent를 실행
 
function initEvent(){
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
// getContext객체가 2d가 되도록 한다. 후에 3d도 지원될 예정
}
 
 
</script>
<style>
canvas{border: 1px solid black}
</style>
</head>
<body>
<canvas id="canvas" width="150" height="150">
    지원하지 않는 브라우저 입니다.
</canvas>
</body>
</html> 
cs

만들어진 캔버스에 그림을 그릴수도있고, 간단한 애니메이션도 만들수 있는 준비가 되었다.


참고로 <canvas>컨텍스트의 좌표는 <canvas>요소의 좌측 상단지점 부터 시작이 됩니다.




저작자표시

'프로그래밍 > Html & CSS' 카테고리의 다른 글

[HTML5] 사각형 그리기  (1) 2015.01.20
html문서의 기본 뼈대  (0) 2014.08.13
overflow  (0) 2014.08.13
네비게이션 메뉴 만들기  (0) 2014.08.13
Margin & Padding  (0) 2014.08.13

티스토리툴바