Day 08 - 그림 그리기

그림판 만들기 맛보기 기초 같은 강의

요구사항

• 마우스로 클릭-드래그 시 선이 그려짐
• 동그란 브러쉬
• 선의 굵기는 굵어졌다 얇아졌다를 반복
• 선의 색상은 무지개색 안에서 변함

TIL

⭐불린 변수 flag 제어

자바스크립트에서 boolean 값을 제어구조를 처리할 때의 flag로 활용할 수 있다. boolean은 true, false 두 값을 가지는데, 이처럼 둘 중 하나의 상태를 제어하는 변수를 flag라고 부른다.

• 예제 1

//flag
let isDrawing = false;

//캔버스에 선을 그리는 함수
function draw(e){
  if(!isDrawing) return; 
  //마우스다운 이벤트가 아닐때는 함수 종료
...
}

//이벤트
canvas.addEventListener("mousedown", () =>
    isDrawing = true;);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", () => isDrawing = false);
canvas.addEventListener("mouseout", () => isDrawing = false);

! 연산자는 논리 연산자 NOT으로, 인수를 하나만 받는다. 피연산자를 불린으로 변환한 후 그 값의 역을 반환한다.

즉,
isDrawing = false 일때, !isDrawing은 true이다.
isDrawing = true 일때, !isDrawing은 false이다.

if문은 괄호 안에 들어가는 조건이 true일 때 블록을 실행하므로, draw 함수를 종료시키는 return은 !isDrawing이 true일 때 실행된다.

마우스 다운 이벤트가 발생하면 isDrawing는 true가 되므로, 이때의 !isDrawing는 false이다. 따라서 return이 실행되지 않고, 그러므로 함수가 종료되지 않으며, 함수를 종료하는 대신 선을 그리는 것이다.

• 예제 2

//flag
let direction = true;

//캔버스에 선을 그리는 함수
function draw(e){
  ...
 
  if (context.lineWidth >= 100 || context.lineWidth <= 1){
      direction = !direction;
  }
 
  if (direction){
    context.lineWidth++;
  } else {
    context.lineWidth--;
  }
}

선의 굵기가 100 이상 또는 1 이하가 되면 direction이 뒤집힌다. 만일 true라면 선의 굵기는 굵어질 것이고, false라면 얇아지게 if문이 작성되었다.

direction = false;가 아닌 direction = !direction;라고 한 것은 false라고 하게 되면 그때그때 뒤집히지 않고 (=flip, toggle 등) false로 고정되기 때문이다.

canvas API

참고 자료

HTML의 <canvas>와 자바스크립트를 통해 그리기 기능을 제공한다. 주로 2D그래픽에 중점을 두고 있음.

• HTML

<canvas id="tutorial" width="150" height="150"></canvas>

width, height로 레이아웃 크기를 설정한다. 기본값은 300/150px. width, height를 css로 변경할 수 있으나 그렇게 하면 html에서 지정한 레이아웃 크기에 따라 크기가 조정된다.

• Javascript

자바스크립트에서 다음과같이 데려온 후,

const canvas = document.getElementById('canvas');

getContext 메소드로 canvas위에 그려지는 것들에 접근할 수 있다.

const ctx = canvas.getContext('2d');

context에는 아래와 같이 여러 메소드가 있는데
종류가 다양해 링크1 링크2 링크3 로 대체한다.

ctx.strokeStyle="black";
선 색상

ctx.lineJoin="round";
선을 연속해서 그렸을 때 브러쉬 모양

ctx.lineCap="round";
선의 끝에서의 브러쉬 모양

ctx.lineWidth =50;
선 굵기

마우스 이벤트

참고 자료

mousemove

마우스가 이동할 때 다음과 같이 마우스 움직임 정보를 알려준다.

MouseEvent {isTrusted: true, screenX: 617, screenY: 592, clientX: 924, clientY: 720, …}

• client X,Y : 브라우저의 좌상단 모서리를 기준으로 마우스의 좌표 출력. 스크롤 되어도 변하지 않음.

• page X,Y : 브라우저에서 보여지고 있는 페이지의 좌상단 모서리를 기준으로 마우스의 좌표 출력. 스크롤하면 변함.

• screen X,Y : 모니터 화면의 좌상단 모서리를 기준으로 마우스의 좌표 출력

• offset X,Y : 객체를 기준으로 마우스의 좌표 출력

*이들의 리턴값이 어떤 형태인지 확인하여 사용해야 함

mousedown, mouseup

요소 위에서 마우스 왼쪽 버튼을 누를 때, 마우스 버튼을 누르고 있다가 뗄 때 발생

• click과 다른점 : click은 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킨다.

mouseover, mouseout

마우스 커서가 요소 바깥에 있다가 안으로 움직일 때 혹은 그 반대일 때 발생

contextmenu

마우스 오른쪽 버튼을 눌렀을 때 발생

마우스 이벤트는 내부 규칙에 의해 발생 순서가 정해져있다.

mousedown > mouseup > click / contextmenu

구현