캔버스 사용법에 대해서 알아보겠습니다.

캔버스(Canvas) 태그란?

HTML의 <canvas> 태그는 웹 페이지 내에서 그래픽을 그리기 위해 사용되는 요소입니다. 이 태그를 사용하면 자바스크립트를 통해 픽셀 단위로 그림을 그릴 수 있어, 다양한 시각적 컨텐츠를 생성하고 조작할 수 있습니다.

<canvas>는 HTML5에서 도입된 요소로, 직접적으로는 그림을 그리지 않습니다. 대신, 자바스크립트를 사용하여 그래픽을 동적으로 그릴 수 있는 "캔버스"를 제공합니다.

캔버스 사용 방법

HTML 구조 설정

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas>는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 <img> 요소처럼 보입니다. 실제로 <canvas> 요소에는 width와 height의 두 속성만 있습니다.
(다만 이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여 설정할 수도 있습니다.)

렌더링 컨텍스트

캔버스는 처음에 비어있습니다. 무언가를 표시하기 위해서, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있습니다. 바로 getContext() 메서드를 사용하여 렌더링 컨텍스트와 그리기 함수에 접근할 수 있습니다. 대부분의 경우 "2d" 컨텍스트가 사용됩니다.

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

그리기 예제

랜더링 컨텍스트까지 설정하였다면 이제 캔버스에 그림을 그릴 차례입니다.

// 직사각형 그리기
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 200, 100);

// 선 그리기
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

// 원 그리기
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

위 예시 코드들은 정말 단순한 도형 예시이며, 더 복잡하고 화려한 그림은 물론 동적으로 움직이는 애니메이션도 가능합니다.

캔버스의 특징

캔버스의 사용 방법까지 알아보았습니다. 이제 캔버스는 어떤 특징이 있는지를 마지막으로 마무리 해보겠습니다!

• 해상도 독립성:
  • <canvas>는 비트맵 기반으로 작동하므로, 디스플레이의 해상도에 따라 픽셀이 확장되거나 축소될 수 있습니다.
• 동적 그래픽:
  • 자바스크립트를 사용하여 캔버스에 그려진 그래픽은 사용자 상호작용에 따라 실시간으로 변경될 수 있습니다.
• 접근성:
  • 캔버스에 그려진 내용은 스크린 리더와 같은 보조 기술에서 해석되지 않으므로, 접근성을 고려한 추가적인 마크업이 필요할 수 있습니다.
• 하위 호환성:
  • 구형 브라우저에서는 <canvas> 요소가 지원되지 않을 수 있습니다. 이 경우 <canvas> 태그 안에 대체 콘텐츠를 제공하는 것이 좋습니다.