노마드 코더 - 바닐라 JS로 그림판 만들기

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Coding Archive

노마드 코더 - 바닐라 JS로 그림판 만들기 본문

🖥️ Clone Coding

노마드 코더 - 바닐라 JS로 그림판 만들기

코등어 2022. 7. 22. 01:54

#1 SETUP + STYLES

0. Project Setup

github 계정에 들어가서 새로운 repository를 만든다.

이때 initialize this repository with에서 "Add a README file"을 체크, gitignore은 "node"넣어준다.

(Add .gitignore에서 .gitignore template: node로 바꿔준다.)

저장할 공간을 터미널에서 열어서 git clone https://github.com/seoye0ng/paint-js(생성된 repository 주소)를 입력하고 깃 클론하면 된다. → 내가 저장할 공간에 paint-js파일이 생성된다.

파일을 vsc에서 열고 html, css, js문서를 만들어 준다.

1. Styles part One

html

(canvas와 팔레트 만들기)

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>PaintJS</title>
  </head>
  <body>
    <canvas id="jsCanvas" class="canvas"></canvas>
    <div class="controls">
      <div class="controls__colors" id="jsColors">
        <div class="controls__color" style="background-color: #2c2c2c"></div>
        <div class="controls__color" style="background-color: white"></div>
        <div class="controls__color" style="background-color: #ff3b30"></div>
        <div class="controls__color" style="background-color: #ff9500"></div>
        <div class="controls__color" style="background-color: #ffcc00"></div>
        <div class="controls__color" style="background-color: #4cd963"></div>
        <div class="controls__color" style="background-color: #5ac8fa"></div>
        <div class="controls__color" style="background-color: #0579ff"></div>
        <div class="controls__color" style="background-color: #5856d6"></div>
        <!--보기쉽게 html에서 background-color를 지정해준다-->
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

reset.css파일을 추가해 브라우저의 디폴트 값으로 설정된 디자인을 모두 없애준다.

css

@import "reset.css";

body {
  background-color: #f6f9fc;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
}

.canvas {
  width: 800px;
  height: 800px;
  background-color: white;
  border-radius: 3%;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.controls {
  margin-top: 80px;
}

.controls .controls__colors {
  display: flex;
}

.controls__colors .controls__color {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  margin: 0 5px;
}

2. Styles part Two

html

(브러쉬 굵기 조절 바와 색 채우기, 저장하기 버튼 만들기)

<div class="controls">
      <div class="controls__range">
        <input
          type="range"
          id="jsRange"
          min="0.1"
          max="5"
          value="2.5"
          step="0.1"
        />
        <!--최소 0.1까지/ 최대 5까지/ 기본값은 2.5/ 조절은 0.1씩-->
      </div>
      <div class="controls__btns">
        <button id="jsMode">Fill</button>
        <button id="jsSave">Save</button>
      </div>

css

 .controls {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.controls .controls__range {
  margin-bottom: 30px;
}

.controls__btns {
  margin-bottom: 30px;
}

.controls__btns button {
  all: unset;
  background-color: white;
  padding: 5px 0;
  width: 80px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.controls__btns button:active {
  transform: scale(0.96);
}

#2 PAINTJS

0. Canvas Events

const canvas = document.getElementById(jsCanvas);

let painting = false;
//클릭하기 전에는 페인팅되지 않기 때문에 false로 설정

function stopPainting() {
  painting = false;
}

function onMouseMove(event) {
  const x = event.offsetX;
  const y = event.offsetY;
}

function onMouseDown(event) {
  painting = true;
}
//onMouseDown했을 경우에만 painting이 true가 됨

function onMouseUp(event) {
  stopPainting();
}

if (canvas) {
  canvas.addEventListener("mousemove", onMouseMove);
  canvas.addEventListener("mousedown", onMouseDown); //mousedown은 마우스를 클릭했을 때를 의미
  canvas.addEventListener("mouseup", onMouseUp); //mouseup은 클릭을 떼었을 때를 의미
  canvas.addEventListener("mouseleave", stopPainting); //마우스가 canvas에서 mouseleave되면 painting이 false가 되도록 설정
}

offset은 캔버스 부분과 관련 있는 값이다.

clientX, Y는 윈도우 전체의 범위 내에서 마우스 위치 값을 나타내는데,

여기서는 윈도우 전체 범위 내의 좌표를 알고 싶은 게 아니라 캔버스 내에서의 좌표만 있으면 된다.

그렇기 때문에 event 안의 offsetX, Y를 사용한다.

1. 2D Context

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

ctx.strokeStyle = "#2c2c2c"; //첫 번째색(검정색)으로 시작하도록 설정
ctx.lineWidth = 2.5; //두께를 2.5로 시작하도록 설정

let painting = false;

function stopPaninting() {
  painting = false;
}

function startPainting() {
  painting = 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 onMouseDown(event) {
  painting = true;
}

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

canvas는 context를 갖고 있는 html 요소이며, context는 canvas 안에서 픽셀을 다루는 것이다.

const ctx = canvas.getContext('2d'); 를 사용하면 내가 할 수 있는 context는 모두 갖게 된다.

ex)

ctx.lineWidth → context로 라인 두께를 조절할 수 있음

ctx.strokeRect → 사각형을 그릴 수 있음

ctx.fillRect → 칠해진 사각형을 그릴 수 있음

ctx.moveTo → context를 어딘가 다른 곳으로 옮길 수 있음

ctx.lineTo →다른 곳에 라인을 그릴 수 있음

context가 가진 것 중엔 Path도 있고, Path는 기본적인 선이다.

우리는 beginPath()를 사용해 Path로 시작하고, moveTo()로 Path를 움직이고, closePath()로 Path를 닫을 수 있다.

'🖥️ Clone Coding' 카테고리의 다른 글

노마드 코더 - 바닐라 JS로 그림판 만들기(2) (0)	2022.07.23
노마드 코더 - 바닐라 JS로 크롬 앱 만들기(10) (0)	2022.06.19
노마드 코더 - 바닐라 JS로 크롬 앱 만들기(9) (0)	2022.06.14
노마드 코더 - 바닐라 JS로 크롬 앱 만들기(8) (0)	2022.06.13
노마드 코더 - 바닐라 JS로 크롬 앱 만들기(7) (0)	2022.06.11

'🖥️ Clone Coding' Related Articles

Comments

Coding Archive

노마드 코더 - 바닐라 JS로 그림판 만들기 본문

노마드 코더 - 바닐라 JS로 그림판 만들기

0. Project Setup

1. Styles part One

2. Styles part Two

0. Canvas Events

1. 2D Context

'🖥️ Clone Coding' 카테고리의 다른 글

티스토리툴바