HTML <canvas> lineTo() 함수 - 직선 그리기

1. lineTo()

lineTo() 함수는 직선을 그릴 때 사용합니다.

 

lineTo(x, y);

 

현재 드로잉 위치에서 지정된 (x, y) 위치까지 선을 그립니다.

 

이 메소드는 선의 끝점의 좌표가 되는 x와 y의 두개의 인자가 필요합니다. 시작점은 이전에 그려진 경로에 의해 결정 되며, 이전 경로의 끝점이 다음 그려지는 경로의 시작점이 됩니다. 또한 시작점은 moveTo() 메소드를 통해 변경될 수 있습니다.

 

 

2. 예제

function draw() {
      var canvas = document.getElementById('tutorial');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        // Filled triangle
        ctx.beginPath();
        ctx.moveTo(25, 25);
        ctx.lineTo(105, 25);
        ctx.lineTo(25, 105);
        ctx.fill();

        // Stroked triangle
        ctx.beginPath();
        ctx.moveTo(125, 125);
        ctx.lineTo(125, 45);
        ctx.lineTo(45, 125);
        ctx.closePath();
        ctx.stroke();
      }
    }

 

결과 화면

 

새로운 경로를 지정하기 위해 beginPath() 메소드를 먼저 실행합니다. 그 다음 moveTo() 메소드를 가지고 시작점을 원하는 위치로 새롭게 지정합니다. 다음은 두 선을 그어 삼각형의 두 면을 그려줍니다.

 

fill()을 통해 경로를 색채우게되면 그 도형은 자동으로 닫히게 되지만 stroke()는 그렇지 않기때문에 closePath() 메소드를 통해 도형을 닫아줘야한다. 만약 윤곽선 삼각형 코드에서 closePath() 메소드를 지우면 결과는 아래와 같다.

 

 

결과 화면

 

 

**참고 사이트 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial