HTML5의 <canvas> 태그는 자바스크립트와 같은 스크립트 언어를 사용해 그래픽과 애니메이션을 그릴 수 있게 해주는 요소입니다. 이 태그는 HTML5에서 새롭게 도입된 기능으로, 웹 페이지에서 다양한 시각적 표현을 구현할 때 활용됩니다.
HTML5 캔버스에서 선을 그리려면 lineTo() 메서드를 사용하면 됩니다. 선을 그리는 과정은 크게 세 단계로 나눌 수 있습니다.
선 그리기 기본 단계
1단계: beginPath() 메서드로 새로운 경로를 시작합니다.
2단계: moveTo() 메서드로 선의 시작점 좌표를 지정합니다.
3단계: lineTo() 메서드로 선이 도달할 끝점 좌표를 지정한 후, stroke() 메서드로 실제 선을 화면에 렌더링합니다.
예제 코드
아래 코드를 실행하면 HTML5 Canvas로 선을 그리는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id="newCanvas" width="400" height="300" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
// 선 그리기
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(180, 100);
ctx.moveTo(30, 10);
ctx.lineTo(260, 100);
ctx.stroke();
</script>
</body>
</html>코드 설명
위 예제에서는 먼저 getElementById()로 캔버스 요소를 가져오고, getContext('2d')를 호출하여 2D 드로잉 컨텍스트를 생성합니다. 이후 beginPath()로 경로를 시작하고, moveTo(30, 30)으로 첫 번째 선의 시작점을 설정한 뒤 lineTo(180, 100)까지 선을 연결합니다. 같은 방식으로 두 번째 선도 그린 후, 마지막에 stroke()를 호출하면 지정된 경로가 실제로 화면에 나타납니다.
실행 결과
코드를 실행하면 검은색 테두리가 있는 400×300 크기의 캔버스 안에 두 개의 선이 그려진 것을 확인할 수 있습니다.