[TIL] 200309, Mon : JS로 Painting board 제작 1 (Canvas태그로 픽셀조작 - 선긋기, 색변경하기 )

rimu·2020년 3월 10일

JavaScript

TIL (Today I Learned)

목록 보기

3/4

Done today

자바스크립트를 이용하여 페인팅 보드 툴을 구현하며 canvas에 대해 공부했다. (개념, 선긋기, 색변경하기 )

New learning

1. Canvas 개념

HTML canvas 태그란?

Canvas는 html에 있는 요소중 하나인데, context라는 특성을 가진다.
context는 픽셀에 접근을 하게 해줘서 픽셀을 조작할 수 있게 해준다.
다음의 세가지를 변수로 설정해줘야한다.
1.Canvas 변수
2.Context 변수
3.Canvas pixel modifier(픽셀사이즈)

const canvas = document.getElementById("jsCanvas");
const ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;

CSS에서의 캔버스 사이즈와 별도로, JS에서 픽셀 사이즈 값을 따로 줘야한다.(픽셀은 JS에서 조작하는 영역이기 때문)

2.마우스 동작 마다 이벤트리스너 함수 설정

마우스가 움직일때

if (canvas) {
 canvas.addEventListener("mousemove", onMouseMove);
}  

function onMouseMove(event) {
  }

"mousemove" 마우스가 움직일때
"mousedown" 마우스가 클릭된 후 해제되지 않는 동안
"mouseup" 마우스가 해제되었을 때
"mouseleave" 마우스가 캔버스를 벗어났을때

3. 선긋기

선긋기 로직
1) 화면에 떠다니는 마우스의 움직임을 선으로 표현한다.
선의 시작점은 마우스가 움직이는 곳 어디든 될 수 있기 때문에 선이 캔버스에 그려지기전에 마우스를 캔버스에 올려놓고 움직이는 것 부터 고려를 해야한다.
2) 캔버스가 클릭 되는 순간 라인을 캔버스에 표시한다.
라인을 만드는건 시작점의 선을 만드는것과도 같은 의미.

function onMouseMove(event) {
  //마우스가 움직일때마다 실행
  const x = event.offsetX;
  const y = event.offsetY;
  if (!painting) {
    //!painting은 painting === false
    ctx.beginPath(); 
    ctx.moveTo(x, y); 
  } else {
    ctx.lineTo(x, y);
    ctx.stroke();
  }
}

offset X, Y ; 캔버스 범위 내에서의 마우스 위치값
ctx.beginPath( ); 선을 만든다
ctx.moveTo(x , y); 마우스를 움직일때마다 x,y좌표로 시작점을 옮긴다
ctx.lineTo(x, y); 현재 sub-path의 마지막점을 특정 좌표와 직선으로 연결한다.

4. 색상 변경하기

색상 변경하기 로직
1) html에 적용한 색상값들에 클래스를 주고 js에 변수로 선언한다.
2) forEach함수를 쓰기 위해 배열에 들어있는 형식으로 변경
Array.from(colors)
3) forEach함수로 각각의 컬러들에 이벤트리스너 함수를 적용한다.
4) 이벤트에 대해 실행할 함수를 정의한다.(클릭한 색상을 타겟으로 불러옴)

Array.from(colors).forEach(color =>
  color.addEventListener("click", handleColorClick)
); //color에는 아무 단어나 써도 상관없음. 배열에 들어있는 아이템을 대표하는 참조 단어일뿐 

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

ctx.strokeStyle : 선 색깔 채우기
ctx.fillStyle : 도형 색깔 채우기

Feelings & Thoughts

canvas에 대해서는 처음 접해봤는데 지금까지 js 공부하면서 제일 재밌게 배웠다. 그리고 자바스크립트로는 정말 못하는게 없는 너낌...?
새로운거 배우면 배울수록 재밌는데 계속 그랬으면 좋겠다. 그리고 노마드코더 니코가 진짜 너무 귀엽고 설명도 찰떡같이 해줘서 더 재밌게 배우는거 같다. 지금 카톡 클론부터해서 자바스크립트 모멘텀, 지금 들은 페인팅보드까지 총 세개째 강의 듣고 있는데 질리지가 않는다. 에러날때마다 '와~~~이' 이러면서 슬퍼하는데 너무 귀여움. 그리고 맨날 룩앳디스뷰리. 이즌잇 섹시? 이러는데 이것도 귀엽다증말. 코딩계의 티모시샬라메....(나혼자 생각) ㅎㅎㅎ

좀 어렵다고 느낀 부분은 선긋기 로직이 처음에 이해가 잘 안가서 어려웠다. 캔버스에 마우스를 대고 움직이는것부터 로직이 시작되는게 뭔 말인지 좀 어려웠는데 지금은 어느정도 이해했다. 그리고 painting 이라는 변수를 false로 가정해놓고 조건문을 만드는데 if(!painting)에서 당연히 변수가 false니까 반댓값 true를 의미하는건줄 알았다. 근데 나같이 생각한 사람들 여럿이 댓글을 달아서 니코가 답변을 준 걸 보고 !painting이 painting === false 라는걸 알게되었다... 여전히 완전히 풀리지는 않은 의문.

그리고 혼자 공부를 할때 보통 콘솔에 뭘 찍어봐야하는지 잘 감이 안오는데 강의를 들으면 니코는 항상 적재적시에 콘솔에 찍어보고 이게 우리가 원하는 결과가 아니기 때문에 새로운 코드를 집어넣는다. 그래서 강의를 볼때는 아주 술술 이해가 되고 그게 내껄로 되었다고 생각을 하지만 나중에 조금만 응용을 해볼까 생각해보면 다시 멍충이가 되어있는 나를 발견....후.
Array.from( )을 써서 배열에 넣고 이걸 forEach문으로 이벤트리스너를 돌릴지 어떻게 생각을 하냐 이말이다.ㅠㅠㅠ 지금은 아는 게 없으니 무에서 유를 창출하듯이 머릿속에 마구 지식을 때려넣고 있는데 이게 밑 빠진독에 물 붓듯 하고 있는건 아닌지...걱정이 항상 든다.
그래서 복습 또 복습만이 살 길인데 왜 항상 한 번 공부해본건 죽어도 또 들여다보기 싫은지.