그림판 만들기 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 INITIAL_COLOR = "2c2c2c";

const saveBtn = document.getElementById("jsSave");

 

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; //그릴 선의 굵기

 

/* ctx.fillStyle = "green"; // 필링 되는 색

ctx.fillRect(50, 20, 100, 49); //x, y , width ,height */

 

let painting = false; // 페인팅을 멈춤

let filling = false; //색 채우기

 

function stopPainting() {

  painting = false;

}

 

function startPainting() {

  painting = true; // true 값에 페인팅이 실행됨

}

 

function onMouseMove(event) {

  const x = event.offsetX;

  const y = event.offsetY;

  if (!painting) {

    //마우스를 클릭하지 않고 움직 일때

 

    ctx.beginPath();

    ctx.moveTo(x, y); // 마우스를 클릭하고 움직일 때

  } else {

    ctx.lineTo(x, y); // 마우스를 움직이는 내내 발생 마우스 무브

    ctx.stroke();

  }

}

 

function onMouseUp(event) {

  stopPainting(); //페인팅 기능 중지

} //마우스 업에도 스탑페인팅을 하지 않는 이유는 나중에 그리는 라인을 추가해야해서

 

function handleColorClick(event) {

  const color = event.target.style.backgroundColor; //컬러를 타겟으로 부터 받아 지정

  ctx.strokeStyle = color; //ctx의 컬러를 color로 바꿔줌 컬러는 아래 어레이로 정해놓은 것

  // 색을 클릭 기능도구

  ctx.fillStyle = color;

}

 

function handleRangeChange(event) {

  const size = event.target.value; //콘솔창에서 value를 찾자 타겟은 value임 (굵기)

  ctx.lineWidth = size; //ctx 라인 굵기에 사이즈를 입혀줌

}

 

function hadleModeClick() {

  if (filling === true) {

    //필링은 기본 값이 false임

    filling = false; //폴스일때 fill로 바뀌고 색채우기 on

    mode.innerText = "Fill";

  } else {

    filling = true; //트루이면 필링 실행 x 페인팅으로 변경

    mode.innerText = "Paint";

  }

} //필링을 하고 있으면 그것을 나에게 말해줄 variable이 필요함 필링모드에선 클릭하면 색이 채워짐

 

function handleCanvasClick() {

  if (filling) {

    ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);

  }

}

 

function handleCM(event) {

  event.preventDefault(); //우클릭 이미지 저장을 막아줌

}

 

function handleSaveClick(event) {

  const image = canvas.toDataURL(); //저장하는 기능

  const link = document.createElement("a");

  link.href = image;

  link.download = "PaintJS[EXPORT]";

  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)

); //색 클릭 할 때 효과

// 어레이를 만들고 for each 컬러로 color를 돌리고 애드 이벤트 리스너로 클릭 > 핸들클릭을 호출함 폴이츠 다음에 컬러를 아무 이름으로 지정해도 상관 없다

 

if (range) {

  range.addEventListener("input", handleRangeChange);

}

 

if (mode) {

  mode.addEventListener("click", hadleModeClick);

}

 

if (saveBtn) {

  saveBtn.addEventListener("click", handleSaveClick);

}