[JS] JavaScript로 canvas상에 드래그로 선 그리기

안녕하세요.

 

canvas 두번째 포스팅입니다.

 

오늘은 canvas에 드래그로 선 그리는 예제를 공유합니다.

 

컨버스상에 그리는 기능을 사용하는 간단한 개념에 대한 설명은 

 

이전의 사각형 그리기 포스팅을 참고해주시면 감사하겠습니다.

 

2021.05.31 - [웹개발/Java & JavaScript] - [JS] JavaScript로 canvas상에 사각형 그리기

[JS] JavaScript로 canvas상에 사각형 그리기

 

canvas에 선 그리기

 

먼저 선을 그릴때도 사각형과 같이 2D 렌더링 컨텍스트를 이용합니다.

사용하는 함수는 moveTo(X , Y), lineTo(X , Y), stroke()

 - moveTo(X , Y) : 시작점을 정해줍니다.

 - lineTo(X , Y) : 시작점에서 이어지는 점을 정해줍니다(계속 이어서 정의 할 수 있음)

 - stroke() : moveTo와 lineTo로 정의한 도형을 그려줍니다. 

 

  context.moveTo(30, 30);
  context.lineTo(90, 90);
  context.stroke();

 

---

 

간단한예제

 

See the Pen canvas-lineexam by Bae KeonHo (@baekh93) on CodePen.

 

 

 

아래는 위의 예제와 컨버스 이벤트를 이용한 활용예제입니다.

(컨버스에서 드래그하여 선을 그려보세요!)

 

See the Pen canvas-drawline by Bae KeonHo (@baekh93) on CodePen.