[Javascript 30] Day 08 - 그림 그리기, 불린 변수 flag 제어
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
구현
Author And Source
이 문제에 관하여([Javascript 30] Day 08 - 그림 그리기, 불린 변수 flag 제어), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@1703979/JS-30-08저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)