HTML에서 선을 그리려면 캔버스(canvas) 요소를 활용해야 합니다. 캔버스가 제공하는 다양한 드로잉 메서드 중 lineTo() 메서드를 사용하면 원하는 위치에 선을 간단하게 그릴 수 있습니다.
lineTo() 메서드는 x와 y 두 개의 매개변수 값을 받으며, 이 좌표값은 선이 도달할 지점의 위치를 결정합니다. 일반적으로 moveTo()로 선의 시작점을 지정한 후 lineTo()로 끝점을 연결하는 방식으로 사용합니다.
함께 사용되는 주요 메서드
- beginPath(): 새로운 경로 그리기를 시작합니다.
- moveTo(x, y): 선의 시작점 좌표를 지정합니다.
- lineTo(x, y): 지정한 좌표(x, y)까지 선을 연결합니다.
- stroke(): 정의된 경로를 실제 화면에 렌더링합니다.
예제
아래 코드를 실행하면 HTML5 캔버스에서 lineTo() 메서드로 선을 그리는 과정을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas</title>
</head>
<body>
<canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
ctxt.beginPath();
ctxt.moveTo(70, 50);
ctxt.lineTo(50, 120);
ctxt.stroke();
</script>
</body>
</html>
위 예제에서는 먼저 getContext("2d")로 2D 드로잉 컨텍스트를 가져온 뒤, beginPath()로 경로를 시작하고 moveTo(70, 50)으로 시작점을 설정합니다. 이후 lineTo(50, 120)으로 끝점을 지정하고 stroke()를 호출하면 두 좌표를 잇는 선이 캔버스에 그려집니다.