[JavaScript] - 그림판 만들기 ④ (모드바꾸기⑵)

저장버튼, 화면 지우기 버튼, 지우개 버튼 만들기

html에 버튼 3개를 만들고 JS에서 변수를 선언해줍니다.
그 후 클릭이벤트를 각각 만들어 줍니다.

<button class="save"></button>
<button class="new-btn"></button>
<button class="eraser-btn"></button>
//-------------html----------------//
const saveBtn = document.querySelector(".save");
const newBtn = document.querySelector(".new-btn");
const eraserBtn = document.querySelector(".eraser-btn");
 
saveBtn.addEventListener("click", saveClick);
//저장하기
 
newBtn.addEventListener("click", newBtnClick);
//화면 지우기
 
eraserBtn.addEventListener("click", eraserBtnClick);
//지우개

 

우선 화면 지우기 버튼, 지우개 버튼부터 만들어 주겠습니다.

화면 지우기 버튼은 화면 채우기 모드의 색깔을 흰색으로 바꾸고

채우기를 하는것과 같고, 지우개 버튼도 이와 마찬가지로 흰색으로 바꾼 후

그리기를 해주는것과 같습니다.

 

function newBtnClick() {
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
}

function eraserBtnClick() {
  ctx.strokeStyle = "white";
  ctx.lineWidth = 50;
  filling = false;
}

lineWidth는 그리기 모드에서 만들었던 굵기 조절과 연동해도 되는데
저는 지우개가 큰 게 좋아서 크게 만들었습니다.
그리고 그림 채우기 모드와 겹치지 않게 filling을 false로 지정해줍니다.

하지만 여기서 문제점이 발생합니다.

지우개를 쓰고 난 뒤에 그리기 모드를 다시 해보면??

위와 같이 지우개를 사용한 후 그리기 모드를 한다면 사용자가 사용하던 색깔로 돌아가지 않는 것과
지우개의 굵기가 그대로 그리기 모드에 따라오는 것을 볼 수 있습니다.

이것을 해결하려면 각각의 함수에 color와 lineWidth값을 넣어줘야 합니다.
그리고 지우개를 클릭 후 그리기 모드를 굳이 안 누르고 색깔만 눌러도 그리기 모드로 돌아갈 수 있게 추가합니다.

function paintingBtnClick() {
  filling = false;
  ctx.strokeStyle = color.value;
  ctx.lineWidth = lineWidth.value;
}
 
function paintingFillBtnClick() {
  filling = true;
  ctx.strokeStyle = color.value;
  ctx.fillStyle = color.value;
  ctx.lineWidth = lineWidth.value;
}
 
function colorChange(event) {
  const colorValue = event.target.value;
  ctx.strokeStyle = colorValue;
  ctx.fillStyle = colorValue;
  ctx.lineWidth = lineWidth.value;
}
 
function colorClick(event) {
  const colorValue = event.target.dataset.color;
  ctx.strokeStyle = colorValue;
  ctx.fillStyle = colorValue;
  color.value = colorValue;
  ctx.lineWidth = lineWidth.value;
}

 

다음은 저장 버튼을 만들어야 되는데 저장버튼은 canvas의 toDataUrl이라는 메소드를 사용해서
만듭니다.

toDataUrl은 canvas에 있는 것을 url데이터로 나타내 줍니다.
console.log()해보면

사진과 같이 나타납니다. 저 url을 클릭하면 사용자의 현재 canvas가 나옵니다.

이제 저 url을 다운받아야 되는데 그건 html의 a태그에 있는 download 속성을 이용합니다.
download 속성은 href에 지정된 파일을 다운로드해주는 기능입니다.

가상의 a태그를 만든 뒤 href에 url을 넣어주고 download속성을 이용해서 canvas에 있는 그림을 이미지로
다운받을 수 있습니다.

function saveClick() {
  const url = canvas.toDataURL();
  const a = document.createElement("a");
  a.href = url;
  a.download = "네임.jpg";
 a.click(); //링크를 클릭-> 다운로드 시작
}

 

 

저장버튼, 화면 지우기 버튼, 지우개 버튼 완성!