HTML Canvas – 선 그리기

HTML Canvas 선 그리기

HTML5 Canvas에서 선을 그리는 방법에 대해 알아본다.

직선 그리기

Canvas에서 직선을 그리려면 다음 메소드를 사용한다:

• moveTo(x,y) – 선의 시작점을 정의한다
• lineTo(x,y) – 선의 끝점을 정의한다

실제로 선이 그려지게 하려면 stroke() 메소드를 사용해야 한다.

예제: Canvas에 직선 그리기

다음 코드는 Canvas에 직선을 그리는 방법을 보여준다:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">브라우저가 HTML5 Canvas를 지원하지 않습니다.</canvas>

<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.moveTo(0, 0);ctx.lineTo(200, 100);ctx.stroke();</script>

위 예제의 실행 과정:

1. moveTo(0,0): 선의 시작점을 캔버스의 왼쪽 상단 모서리로 이동한다
2. lineTo(200,100): 선을 캔버스의 지점 (200,100)까지 그린다
3. stroke(): 실제로 선을 그리는 메소드를 호출한다

여러 선 그리기

여러 선을 그리려면 moveTo()와 lineTo() 메소드를 반복해서 사용하면 된다.

예제: Canvas에 여러 선 그리기

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">브라우저가 HTML5 Canvas를 지원하지 않습니다.</canvas>

<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.beginPath();ctx.moveTo(20, 20);ctx.lineTo(180, 20);ctx.stroke();ctx.beginPath();ctx.moveTo(20, 50);ctx.lineTo(180, 50);ctx.stroke();ctx.beginPath();ctx.moveTo(20, 80);ctx.lineTo(180, 80);ctx.stroke();</script>

선 스타일 설정

Canvas에서는 다양한 속성을 사용하여 선의 스타일을 변경할 수 있다.

선 색상 변경

strokeStyle 속성을 사용하여 선의 색상을 설정할 수 있다.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">브라우저가 HTML5 Canvas를 지원하지 않습니다.</canvas>

<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.strokeStyle = "#FF0000";ctx.moveTo(0, 0);ctx.lineTo(200, 100);ctx.stroke();</script>

선 두께 변경

lineWidth 속성을 사용하여 선의 두께를 설정할 수 있다.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.lineWidth = 10;ctx.moveTo(20, 20);ctx.lineTo(180, 80);ctx.stroke();</script>

선 끝부분 스타일 변경

lineCap 속성을 사용하여 선의 끝 부분 스타일을 설정할 수 있다. 가능한 값은 “butt”, “round”, “square”이다.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.lineWidth = 10;ctx.beginPath();ctx.lineCap = "butt";ctx.moveTo(20, 20);ctx.lineTo(180, 20);ctx.stroke();ctx.beginPath();ctx.lineCap = "round";ctx.moveTo(20, 60);ctx.lineTo(180, 60);ctx.stroke();ctx.beginPath();ctx.lineCap = "square";ctx.moveTo(20, 100);ctx.lineTo(180, 100);ctx.stroke();</script>

선 연결부 스타일 설정

lineJoin 속성을 사용하여 두 선이 만나는 지점의 스타일을 설정할 수 있다. 가능한 값은 “bevel”, “round”, “miter”이다.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.lineWidth = 10;ctx.beginPath();ctx.lineJoin = "miter";ctx.moveTo(20, 20);ctx.lineTo(100, 50);ctx.lineTo(20, 80);ctx.stroke();ctx.beginPath();ctx.lineJoin = "round";ctx.moveTo(120, 20);ctx.lineTo(200, 50);ctx.lineTo(120, 80);ctx.stroke();ctx.beginPath();ctx.lineJoin = "bevel";ctx.moveTo(220, 20);ctx.lineTo(300, 50);ctx.lineTo(220, 80);ctx.stroke();</script>

점선 그리기

setLineDash() 메소드와 lineDashOffset 속성을 사용하여 점선을 그릴 수 있다.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.beginPath();ctx.moveTo(20, 20);ctx.lineTo(280, 20);ctx.stroke();ctx.beginPath();ctx.setLineDash([10, 5]);ctx.moveTo(20, 50);ctx.lineTo(280, 50);ctx.stroke();ctx.beginPath();ctx.setLineDash([20, 5, 5, 5]);ctx.moveTo(20, 80);ctx.lineTo(280, 80);ctx.stroke();ctx.beginPath();ctx.setLineDash([]);ctx.moveTo(20, 110);ctx.lineTo(280, 110);ctx.stroke();</script>

그리드 그리기

다음 예제는 캔버스에 그리드를 그리는 방법을 보여준다. 이는 다양한 작업을 할 때 참조점으로 활용할 수 있다.

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">

<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var canvasWidth = c.width;var canvasHeight = c.height;var gridSize = 20;ctx.strokeStyle = "#ddd";ctx.lineWidth = 0.5;for (var x = 0; x <= canvasWidth; x += gridSize) {ctx.beginPath();ctx.moveTo(x, 0);ctx.lineTo(x, canvasHeight);ctx.stroke();}for (var y = 0; y <= canvasHeight; y += gridSize) {ctx.beginPath();ctx.moveTo(0, y);ctx.lineTo(canvasWidth, y);ctx.stroke();}ctx.strokeStyle = "#FF0000";ctx.lineWidth = 1;ctx.beginPath();ctx.moveTo(0, canvasHeight/2);ctx.lineTo(canvasWidth, canvasHeight/2);ctx.stroke();ctx.beginPath();ctx.moveTo(canvasWidth/2, 0);ctx.lineTo(canvasWidth/2, canvasHeight);ctx.stroke();</script>

💡 Canvas 선 그리기 팁:
• 복잡한 도형을 그릴 때는 beginPath()를 사용하여 각 선을 분리한다
• 최적화를 위해 여러 선을 한 번에 그리려면 path를 모두 정의한 후 마지막에 한 번만 stroke()를 호출한다
• 곡선이 필요하다면 arc(), bezierCurveTo(), quadraticCurveTo() 메소드를 사용할 수 있다

Canvas 선 그리기 속성 요약

이 기본적인 선 그리기 기술을 마스터하면 복잡한 그래픽과 애니메이션을 Canvas에서 구현할 수 있다. 더 복잡한 형태는 이러한 기본 요소들을 조합하여 만들 수 있다.