canvas 의 가로, 세로 값을 가지는 속성임.
만약 canvas의 가로, 세로 값이 변하면 브라우저는 해당 canvas의 context는 최초의 상태로 초기화시켜야 한다.
예를 들어 다음의 코드는 가로,세로 200px 짜리 빨간 사각형을 브라우저에 출력한다.
(화면 캡쳐가 귀찮아서 임의로 html로 처리했음)
(canvas를 지원하는 브라우저만 테스트 가능 - 본인은 chrome으로 테스트)
<!DOCTYPE HTML>
<html>
<body>
<canvas id="cnvs" width="200" height="200" style="background-color: red;"></canvas>
</body>
</html>
<html>
<body>
<canvas id="cnvs" width="200" height="200" style="background-color: red;"></canvas>
</body>
</html>
그리고 사각형을 하나 그려본다.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var cnvs = document.getElementById("cnvs");
var ctx = cnvs.getContext('2d');
ctx.fillRect(0, 0, 50, 50); // 좌표 0:0 위치에 크기 50:50 짜리 까만 사각형
}
</script>
</head>
<body>
<canvas id="cnvs" width="200" height="200" style="background-color: red;"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var cnvs = document.getElementById("cnvs");
var ctx = cnvs.getContext('2d');
ctx.fillRect(0, 0, 50, 50); // 좌표 0:0 위치에 크기 50:50 짜리 까만 사각형
}
</script>
</head>
<body>
<canvas id="cnvs" width="200" height="200" style="background-color: red;"></canvas>
</body>
</html>
사각형을 하나 더 그린다.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var cnvs = document.getElementById("cnvs");
var ctx = cnvs.getContext('2d');
ctx.fillRect(0, 0, 50, 50); // 좌표 0:0 위치에 크기 50:50 짜리 까만 사각형
ctx.fillRect(0, 100, 50, 50); // 좌표 0:100 위치에 크기 50:50 짜리 까만 사각형
}
</script>
</head>
<body>
<canvas id="cnvs" width="200" height="200" style="background-color: red;"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var cnvs = document.getElementById("cnvs");
var ctx = cnvs.getContext('2d');
ctx.fillRect(0, 0, 50, 50); // 좌표 0:0 위치에 크기 50:50 짜리 까만 사각형
ctx.fillRect(0, 100, 50, 50); // 좌표 0:100 위치에 크기 50:50 짜리 까만 사각형
}
</script>
</head>
<body>
<canvas id="cnvs" width="200" height="200" style="background-color: red;"></canvas>
</body>
</html>
여기가 맨 위에 적어놓은 글의 포인트다.
width나 height 값을 변경시키면 canvas의 context는 초기값으로 복원된 후, 다음 그리기를 수행한다.
그러므로 첫번째 사각형과 두번째 사각형 그리기 사이에 width나 height 값을 변경시키면 최종적으로는,
두번째 그린 사각형만 그려지게 된다.
크기가 이전과 동일하든 다르든 무조건 초기화 시킨다.
그러므로 아래와 같은 코드는 두번째 그린 사각형만 나오게 된다.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var cnvs = document.getElementById("cnvs");
var ctx = cnvs.getContext('2d');
ctx.fillRect(0, 0, 50, 50); // 첫번째 사각형
cnvs.width = 200; // 크기 변경
ctx.fillRect(0, 100, 50, 50); // 두번째 사각형
}
</script>
</head>
<body>
<canvas id="cnvs" width="200" height="200" style="background-color: red;"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var cnvs = document.getElementById("cnvs");
var ctx = cnvs.getContext('2d');
ctx.fillRect(0, 0, 50, 50); // 첫번째 사각형
cnvs.width = 200; // 크기 변경
ctx.fillRect(0, 100, 50, 50); // 두번째 사각형
}
</script>
</head>
<body>
<canvas id="cnvs" width="200" height="200" style="background-color: red;"></canvas>
</body>
</html>
참고
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
'HTML/CSS' 카테고리의 다른 글
| [HTML5] canvas - tutorial (기본, 도형그리기) (0) | 2010.02.26 |
|---|---|
| [HTML5] CanvasRenderingContext2D 인터페이스 (0) | 2010.02.26 |
| [HTML5] canvas 브라우저 별 차이 (0) | 2010.02.19 |
| [HTML] 태그 리스트 (0) | 2010.01.27 |
| embed 등을 통해 웹페이지에서 미디어파일을 재생이 안될 때 (4) | 2009.07.06 |
