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

지난 시간에는 그림판의 그리는 과정을 나타냈고

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

오늘은 그림판의 지우기 기능을 넣어보고자 한다.

나는 뭐 지우는 과정에 무슨 이전 그리기 과정을 불러와서 그려진 부분을 인식하고 클릭한 영역 내에 있는 그림을 지우는 이런 복잡한 과정을 거치는 줄 알았다.

근데 그냥 캔버스의 배경색으로 덮는 거였다 ㅋㅋㅋㅋ

     this.context.strokeStyle = this.eraserColor; //배경색으로 덮어버림
      this.context.lineWidth = 20;

erasercolor는 배경색인 흰색으로 지정했고 그냥 그걸 변수로 지정했다.

단지 색깔만 배경색으로 하고 나머지는 그리기 기능이랑 같다!

 

그런데 캔버스의 배경색이 디폴트가 투명색이라는 점을 조심해야 한다.

즉, 아무 설정도 하지 않은 상태에서 보이는 캔버스의 색은 html의 배경색이다.

그래서 캔버스의 배경색을 설정해야한다

initCanvasBackground() {
    this.context.fillStyle = this.backgroundColor; //캔버스 배경색 지정
    this.context.fillRect(0, 0, this.canvasEl.width, this.canvasEl.height); //캔버스 기준으로 0,0부터 너비 높이만큼 사각형을 지정
  }

백그라운드색은 미리 변수로 지정해놓았다.

아래 fillRect는 context에 지정한 색깔을 0부터 캔버스 크기만큼의 사각형을 만들어 캔버스에 덮는 함수다.

그니까 이건 제일 처음에 설정해야겠다.

 

그러면 지우개 기능 끝!

 

(지우개 버튼이나 지우개 기능 키고 끄는 기능은 쉬우니 본인이 직접 해보시길 바람)