html

HTML - 캔버스 시작하기

1월 15, 2021
이미지를 출력하기 위해 우리는 <img>태그를 이용하여왔고, 자바 애플릿이나 플래시를 이용해 고급스런 애니메이션 효과를 얻을 수 있었습니다. 하지만 애플릿이나 플래시의 경우 플러그인 소프트웨어를 따로 설치해야 하고 특정 브라우저에서만 실행되는 등 호환성에 많은 문제점이 있었습니다. 더구나 모바일에서는 설치 자체가 되지 않아 웹사이트 개발에 어려움이 많습니다. 이러한 문제를 해결하기 위해 HTML5에서 캔버스를 도입하였습니다. 장점이라면 모바일과 모든 브라우저에서 작동한다는 점입니다. <canvas>태그로 할 수 있는 일은 선형, 원형, 사각형, 곡선, 이미지 등 지원하는 게 많습니다.

<canvas>에는 id, style, width, height 속성을 사용할 수 있고, <canvas>로 시작해서 </canvas> 로 끝나야 합니다.

<canvas
  id="필수 사항"
  style="CSS 선택 사항"
  width="가로크기. 기본 값 300(px), 선택 사항."
  height="세로크기. 기본 값 150(px), 선택 사항."
>
  <p>캔버스 태그를 지원하지 않는 브라우저입니다.</p>
</canvas>

캔버스 id 속성을 제외한 나머지 속성은 선택사항이며 width는 기본 값이 300(px), height는 기본 값이 150(px)입니다. <canvas>와 </canvas>사이의 내용은 캔버스를 지원하지 않는 오래된 브라우저를 대체되는 내용이 들어 갑니다. 그리고 하나의 웹 페이지에 여러 개 만들 수 있습니다. 

아래 그림과 같이 X*Y좌표 중심은 왼쪽 상단의 모서리 지점에서 시작하며 각 0*0(px) 입니다. 


캔버스를 지원하지 않는 브라우저를 대체하는 내용은 아래와 같이 작성할 수 있습니다.

<!-- 텍스트 삽입 예 -->
<canvas id="mycanvas01" width="300" height="150">
  <p>Canvas가 지원되지 않는 브라우저입니다.</p>
</canvas>
<!-- 이미지 삽입 예 -->
<canvas id="mycanvas02" width="300" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

배경색이 다른 캔버스 3개 만들어 보겠습니다. 첫 번째 캔버스는 CSS를 사용하였고 두 번째는 캔버스 크기를 지정하지 않았습니다.

<style>
#mycanvas01 {
  background-color:blue;
  width: 300px;
  height: 300px;
}
</style>
<!-- 1번째 캔버스 -->
<canvas id="mycanvas01">
  <p>Canvas가 지원되지 않는 브라우저입니다.</p>
</canvas>

<!-- 2번째 캔버스 -->
<canvas id="mycanvas02" style="background-color:yellow;">
  <p>Canvas가 지원되지 않는 브라우저입니다.</p>
</canvas>

<!-- 3번째 캔버스 -->
<canvas id="mycanvas03" style="background-color:red;" width="300" height="150">
  <p>Canvas가 지원되지 않는 브라우저입니다.</p>
</canvas>



스타일 지정은 아래와 같이 <canvas>태그에 바로 접근해서 제어할 수도 있습니다.

<style>
  canvas { border: 1px solid black; }
</style>
<canvas id="mycanvas"></canvas>


렌더링 컨텍스트

캔버스를 만들면 드로잉 영역에 처음에는 비어있습니다. 무언가를 표시하기 위해서, 어떤 스크립트가 컨텍스트에 접근하여 그리도록 할 필요가 있습니다. 먼저, <canvas> 태그를 찾아 DOM객체를 얻어낸 다음 getContext() 메서드를 이용해 그리기 함수를 불러와야 하는데, canvas API를 이용하여 객체를 생성하는 명령은 getContext(“2d”) 입니다. <canvas> 태그에 아래 표의 프로퍼티와 메서드를 사용할 수 있습니다.

객 체 설 명
width 캔버스의 가로(px) 값. 값을 설정하거나 반환
Ex.) <canvas width="300"/>
height 캔버스의 세로(px) 값. 값을 설정하거나 반환
Ex.) <canvas height="150"/>
style 캔버스의 CSS3 객체.
(스타일시트 속성을 설정하거나 반환)
getContext() 캔버스에 그리기 컨텍스트 객체 반환 

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"></canvas>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = canvas.height = 300;
if(canvas.getContext) {
  var context = canvas.getContext('2d');
}
</script>

아래 예제를 보면 .width 와 .height 프로퍼티를 이용한 결과인데, width 와 height 에 값을 정의하지 않았기 때문에 기본 값이 출력되었습니다.

<style>
 canvas {
  width: 300px;
  height: 300px;
  border: 1px solid black;
 }
</style>
<canvas id="mycanvas"></canvas>
<div id="canvas_info"></div>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
if(canvas.getContext) {
  var context = canvas.getContext('2d');

  var canvas_size = 'width: ' + canvas.width + ', height: ' + canvas.height;
  document.getElementById('canvas_info').innerText = canvas_size;
  /*
    결과: 
    width: 300, height: 150
  */
}
</script>

다음은 Style을 적용 예제입니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"></canvas>
<div id="canvas_info"></div>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
if(canvas.getContext) {
  var context = canvas.getContext('2d');

  // CSS 적용 예제
  canvas.style.width = "500px";
  canvas.style.height = "500px";
  canvas.style.background = "blue";

  var canvas_size = 'width: ' + canvas.style.width + ', height: ' + canvas.style.height;
  document.getElementById('canvas_info').innerText = canvas_size;
  /*
    결과: 
    width: 500px, height: 500px
  */
}
</script>

Tag:

0 Comments

0 댓글