[VanillaJS] 1-Canvas를 이용해서 그림판 만들어보기-그리기

패스트캠퍼스 강의에서 그림판 만들기 실습을 했는데 너무 흥미로워서 글로 남긴다.

그림판을 제작할 때는 HTML의 캔버스 태그를 이용한다.

코드에선 클래스를 사용했기 때문에 this문을 사용함. 본인 코드에 맞게 적절히 수정하길

참고: El로 끝나는 값-HTML태그

<canvas width="800" height="900" id="canvas"></canvas>

캔버스 작업을 하기 위해선 먼저 캔버스의 context를 가지고 와야 한다.

context = 캔버스엘리먼트.getContext('2d와 3d 선택가능');

context는 2d와 3d 선택이 가능하다. 즉, 일반적인 2d작업뿐만 아니라 3d작업도 가능하다는 말!

context를 가지고 왔다면 이제 canvas에 이벤트리스너를 등록한다.

 

그림판에 그림을 그릴 때 나오는 이벤트(행위)는 다음과 같다.

1. 그림판에 마우스를 누르면 그리기 시작(mousedown)

2. 마우스를 누른 상태에서 마우스를 움직이면 그 경로대로 그림이 그려짐(mousemove)

3. 마우스를 누르다가 다른 화면으로 벗어나면 그리기가 종료(mouseout)

4. 마우스를 떼면 그리기가 종료(mouseup)

onMouseDown(e) {
    this.IsMouseDown = true;
    const currentPosition = this.getMousPosition(e); //캔버스 기준 x, y좌표를 구하는 로직

    this.context.beginPath(); //경로를 시작하겠다.
    this.context.moveTo(currentPosition.x, currentPosition.y); //펜의 위치를 x,y로 움직여줘
    this.context.lineCap = 'round'; //라인 끝을 둥글게
    this.context.strokeStyle = this.colorPickerEl.value; //라인의 색깔
    this.context.lineWidth = this.brushSizeEl.value; //라인 두께
}

마우스가 눌러진 상태에서만 캔버스 내 마우스 이동 이벤트를 작동할 수 있게 IsMouseDown을 설정했다.

우선 그림을 그리기 위해선 캔버스 내에서 현재 마우스의 위치를 알아야 하는데 그 위치를 구하는 함수를 getMousePosition으로 했다. 이 함수는 다음과 같다.

  getMousPosition(e) {
    const boundaries = this.canvasEl.getBoundingClientRect();
    return {
      x: e.clientX - boundaries.left,
      y: e.clientY - boundaries.top,
    };
  }

우선 이벤트의 clientX나 clientY는 웹화면의 왼쪽 상단을 0,0라 할 때 현재위치를 좌표값으로 나타낸다.

그리고 boundaries의 left와 top값은 뷰포인트에서 왼쪽으로부터의 거리와, 위에서부터의 거리를 나타낸다. 따라서 전체 뷰포인트의 좌표값에서 캔버스의 거리를 빼면 캔버스 기준 현재 위치를 알 수 있다. 

 

아래 두strokeStyle과 lineWidth는 실습에서는 input 태그 중에서는 색깔 파레트를 선택할 수 있는 옵션과 범위를 설정할 수 있는 옵션이 있는데 그 옵션을 이용해서 값을 받고 context에 적용했다.

 

 

 

 

바로 마우스를 움직였을때 함수를 살펴보자

  onMouseMove(e) {
    if (!this.IsMouseDown) return;
    const currentPosition = this.getMousPosition(e);
    this.context.lineTo(currentPosition.x, currentPosition.y);
    this.context.stroke();
  }

마우스가 눌러지지 않았다면 실행하지 않고 눌러졌다면 실행한다

먼저 현재 위치를 가져오고 현재 위치에서 현재위치로 선을 긋는다(눌러져있기 때문에 moveto가 항상 업데이트)

그리고 그려진다. 쉽게 생각하면 계속해서 점이 찍혀져서 그게 선으로 보인다고 생각하면 편하다.

 

그리고 마우스를 떼면

onMouseOut() {
    this.IsMouseDown = false;
  }

false로 바꿔줘서 마우스 이동 이벤트가 일어나지 않게 한다.

그러면 그림판이 작동하는 걸 볼 수 있다!

 

다음은 지우개 구현..