[JavaScript] JS로 그림판 만들기, save 기능 구현하기 [8/8]

2022.06.07 - [Practice] - [JavaScript] JS로 그림판 만들기, Fill 기능 구현하기! [7/8]

[JavaScript] JS로 그림판 만들기, Fill 기능 구현하기! [7/8]

 

저번 포스팅은 Fill 기능까지 넣어줬다!

이번 포스팅은 마지막 save 기능을 넣어주도록 해보자!

 

canvas는 pixel을 다루는거라 기본적으로 image를 만들면 download와 save는 이미 내장되어 있다!

 

app.js 에 아래 코드 추가

  canvas.addEventListener("contextmenu", handleCM); // 이벤트 추가

function handleCM(event) {
  event.preventDefault();
}

function handleSaveClick() {
  const image = canvas.toDataURL();
  const link = document.createElement("a");
  link.href = image;
  link.download = "PaintJS";
  link.click();
}

if (saveBtn) {
  saveBtn.addEventListener("click", handleSaveClick);
}

위 코드를 추가해주면 된다!

save 버튼을 누르면 저장까지 잘되고 실행되는걸 볼 수 있다!!

 

app.js 의 전체 코드이다!

const canvas = document.getElementById("jsCanvas");
const ctx = canvas.getContext("2d");
const colors = document.getElementsByClassName("jsColor");
const range = document.getElementById("jsRange");
const mode = document.getElementById("jsMode");
const saveBtn = document.getElementById("jsSave");

const INITIAL_COLOR = "#2c2c2c";
const CANVAS_SIZE = 700;


//컨버스 크기
canvas.width = CANVAS_SIZE;
canvas.height = CANVAS_SIZE;


ctx.fillStyle = "white";
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
ctx.strokeStyle = INITIAL_COLOR; // 우리가 그릴 선들은 모두 이 색을 갖는다
ctx.fillStyle = INITIAL_COLOR;
ctx.lineWidth = 2.5; // 라인의 너비가 2.5

let painting = false; 
let filling = false; // 기본값은 안채워져있음

function stopPainting() {
    painting = false;
  }

function startPainting() {
    painting = true;
}

function onMouseMove(event){
    const x = event.offsetX;
    const y = event.offsetY;
    if (!painting) {
        ctx.beginPath(); // path는 선이다, path를 만들면 마우스의 x,y, 좌표로 path를 옮긴다
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y); // lineTo는 path의 이전 위치에서 지금 위치까지 선을 만드는 것
        ctx.stroke();
      } // lineTo()와 stroke()는 마우스를 움직이는 내내 발생한다! 마우스를 움직이는 동안 계속 발생한다!
}

function handleModeClick() {
    if (filling === true) {
        filling = false;
        mode.innerText = "Fill";
      } else {
        filling = true;
        mode.innerText = "Paint";
      }
  }


function onMouseUp(event){
    painting = false;
}

function onMouseLeave(event){
    painting = false;
}

function handleRangeChange(event) {
    const size = event.target.value;
    ctx.lineWidth = size;
  }

function handleColorClick(event) {
    const color = event.target.style.backgroundColor;
    ctx.strokeStyle = color; // strokeStyle이 target에 있는 색상이 된다!
    ctx.fillStyle = color;
  }

  function handleCanvasClick() {
    if (filling) {
      ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
    }
  }

  function handleCM(event) {
    event.preventDefault();
  }

  function handleSaveClick() {
    const image = canvas.toDataURL();
    const link = document.createElement("a");
    link.href = image;
    link.download = "PaintJS";
    link.click();
  }
  

if(canvas){
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mousedown", startPainting);
    canvas.addEventListener("mouseup", stopPainting);
    canvas.addEventListener("mouseleave", stopPainting);
    canvas.addEventListener("click", handleCanvasClick);
    canvas.addEventListener("contextmenu", handleCM);
}

Array.from(colors).forEach(color =>
    color.addEventListener("click", handleColorClick)
  );
  
if (range) {
    range.addEventListener("input", handleRangeChange);
}

if (mode) {
    mode.addEventListener("click", handleModeClick);
  }

if (saveBtn) {
    saveBtn.addEventListener("click", handleSaveClick);
}

 

위 그림판을 통해 캐치마인드와 같은 게임을 만들 떄 활용할 수 있을 수 있을거라는 생각을 했다!

되게 재밌게 했던 그림판 만들기 끝!!

---

 

더 자세하게 알고 싶으면 아래 사이트를 참고하면 문서로 잘 설명되어 있다!!

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial

캔버스 튜토리얼 - Web API | MDN