🎨 웹 그림판 만들기

아래 기능들을 가진 간단한 웹 그림판을 만듭니다.

• 기능 : 그리기, 색상 선택하기, 브러쉬 크기 조절하기, 화면 채우기, 이미지 저장하기

💡Algorithm

1. HTML로 Frame을 만들고 CSS로 style을 잡아줍니다.

2. 마우스가 Canvas 위에 존재할 때, 마우스의 상태를 인지하도록 합니다.

1. HTML에서 canvas를 불러옵니다

const Canvas = document.getElementbyID("jsCanvas");

2. Canvas에서 일어나는 Event를 감지합니다.

let painting = false;

function stopPainting(){
  painting = false;
}

function startPainting(){
  painting = true;
}

function onMouseMove(event){
  const x = event.offsetX; //마우스가 캔버스 안에서 움직일 때의 x값
  const y = event.offsetY; // ~ 때의 y값
}


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

3. 선 그리기 기능을 추가합니다.

캔버스 : html요소 중 하나
context : 캔버스 요소에서 픽셀에 접근할 수 있는 방법 = 캔버스 안의 픽셀들
생성방법 : context variable을 선언한다.

1. context를 선언하고 canvas 기본 셋팅을 합니다.

const ctx = canvas.getContext("2d"); // 캔버스 안에서 픽셀을 컨트롤 하도록 함

const INITIAL_COLOR = "#2c2c2c";

canvas.width = 700;
canvas.height = 700;

ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = INITIAL_COLOR;
ctx.fillStyle = INITIAL_COLOR;
ctx.lineWidth = 2.5;

2. 마우스를 움직일 때의 두가지 경우의 수를 고려해 함수를 작성합니다.

• 마우스 버튼을 클릭한 채로 이동할 때
• 마우스 버튼을 클릭하지 않은 채로 이동할 때

function onMouseMove(event){
    const x = event.offsetX; //마우스가 캔버스 안에서 움직일 때의 x값
    const y = event.offsetY; // ~ 때의 y값
  
  if (!painting) {
      ctx.beginPath();
      ctx.moveTo(x,y);
  } else {
      ctx.lineTo(x,y);
      ctx.stroke();
}

4. 색상 선택 기능을 추가합니다.

1. HTML에서 컬러칩(jsColor)을 불러옵니다.

const colors = document.getElementsByClassName("jsColor"); // 컬러칩 불러오기

2. 컬러칩(jsColor) 배열 내에 있는 각각의 컬러들에 대한 클릭 이벤트를 감지합니다.

Array.from(colors).forEach(color => color.addEventListener("click", handleColorClick))

3. 색상 클릭 시 색상의 배경색상을 불러와 선 스타일, 채우기 스타일에 각각 할당합니다.

function handleColorClick(event){
  const color = event.target.style.backgroundColor;
  ctx.strokeStyle = color;
  ctx.fillStyle = color;
}

5. 브러쉬 사이즈 조절 기능을 추가합니다.

1. HTML에서 슬라이더(jsRange)를 불러옵니다.

const range = document.getElementById("jsRange"); // 슬라이더 불러오기

2. 슬라이더의 input을 감지해 input 발생 시 함수를 실행합니다.

if (range){ //range 슬라이더 인풋 감지
    range.oninput = handleInput;
}

3. 슬라이더의 input 값을 불러와 lineWidth에 할당합니다.

function handleInput(){
  const rangeValue = range.value;
  ctx.lineWidth = rangeValue;
}

6. 채우기 기능을 추가합니다.

1. HTML에서 Fill/Paint 버튼을 불러옵니다.

const mode = document.getElementById("jsMode"); // fill 버튼

2. fill 버튼 클릭 이벤트를 감지해 함수를 실행합니다.

if (mode){ //fill 버튼 클릭 이벤트 감지
    mode.addEventListener("click", handleMode); 
}

3. Paint 모드일 경우 Fill을, 반대의 경우 Paint를 실행하는 함수를 작성합니다.

• 두가지 모두를 함께 사용하기 위해서는 filling 변수를 선언합니다.

let filling = false;

• filling이 true일 경우, fill을 하는 함수를 작성합니다.

function fillCanvas() {
    if(filling){ //filling이 true일 때
    ctx.fillRect(0, 0, canvas.width, canvas.height); // 캔버스 크기만큼 채우기
    }
}

• filling이 true일 경우, false로 전환해 paint 모드를 실행합니다.
  filling이 false일 경우, true로 전환해 fill 모드를 실행합니다.

function handleMode() { // fill 버튼클릭 시 실행함수
    if (filling === true) {
        filling = false;
        mode.innerHTML = "FILL";
        
    } else {
        filling = true;
        mode.innerHTML = "PAINT";
    }
}

7. 저장 기능을 추가합니다.

1. HTML에서 Save 버튼을 불러옵니다.

const mode = document.getElementById("jsMode"); // fill 버튼

2. Save 버튼 클릭 이벤트를 감지해 함수를 실행합니다.

if (save){ //save 버튼 클릭 이벤트 감지
    save.addEventListener("click", saveImg);
}

3. 캔버스 데이터를 이미지로 변환하고 html에 a 태그(링크))를 생성합니다.
   a 태그의 주소에 img를 할당한 뒤 태그 다운로드 시의 이름을 정합니다.
   그리고 링크 클릭이벤트를 실행합니다.

function saveImg(){
  const img = canvas.toDataURL("image/png"); // 캔버스 데이터 이미지로 변환
  const link = document.createElement("a"); // html에 a태그 (링크) 생성
  link.href = img; // 링크에 이미지 할당
  link.download = ("PaintJs"); // 링크 다운로드 시 이름 할당
  link.click(); // 링크 클릭이벤트 실행
}