HTML에서 스크립트만으로 그래픽을 만들고 싶다면 <canvas> 태그를 사용하면 됩니다. HTML5에서 도입된 <canvas> 태그는 자바스크립트 같은 스크립트 언어와 연동하여 그래픽, 애니메이션, 게임 화면, 데이터 시각화 차트 등을 자유롭게 그릴 수 있는 강력한 도구입니다.
<canvas> 태그의 주요 속성
<canvas> 태그는 다음 두 가지 속성으로 캔버스 영역의 크기를 조절할 수 있습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| height | 픽셀(px) | 캔버스의 높이를 지정합니다. |
| width | 픽셀(px) | 캔버스의 너비를 지정합니다. |
속성을 지정하지 않으면 기본적으로 너비 300px, 높이 150px 크기의 캔버스가 생성됩니다.
예제 코드
아래 코드를 실행하면 <canvas> 태그와 자바스크립트를 활용해 파란색 사각형 그래픽을 그릴 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas Tag</title>
</head>
<body>
<canvas id = "newCanvas">브라우저가 canvas 태그를 지원하지 않습니다.</canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#00AEEF';
ctx.fillRect(0,0,180,50);
</script>
</body>
</html>
코드 설명
getContext('2d') 메서드는 캔버스의 2D 렌더링 컨텍스트 객체를 반환합니다. 이 객체를 통해 다양한 드로잉 API에 접근할 수 있습니다.
fillStyle 속성은 도형을 채울 색상을 지정하며, 위 예제에서는 하늘색 계열인 '#00AEEF'로 설정했습니다.
fillRect(x, y, width, height) 메서드는 지정한 좌표(x, y)에서 시작해 설정된 너비와 높이만큼 채워진 사각형을 그립니다. 즉, 위 예제는 캔버스의 왼쪽 상단 모서리부터 가로 180px, 세로 50px 크기의 파란색 사각형을 출력합니다.
이처럼 <canvas> 태그는 단순한 도형부터 원, 선, 텍스트, 이미지 처리, 심지어 실시간 애니메이션까지 확장할 수 있어 웹 기반 그래픽 작업에 매우 유용하게 활용됩니다.