HTML5 Canvas 로 그림판 웹 앱 만들기 - 초보자 가이드

소개

이 프로젝트에서는 간단한 웹 기반 드로잉 보드 애플리케이션을 단계별로 만들어 보겠습니다. 각 단계는 이전 단계를 기반으로 구축되어 애플리케이션에 기능을 점진적으로 추가할 수 있습니다. 이 프로젝트가 끝나면 사용자가 그림을 그리고, 브러시 색상을 변경하고, 브러시 크기를 조정하고, 캔버스를 지울 수 있는 완벽하게 작동하는 드로잉 보드를 갖게 됩니다.

👀 미리보기

drawing board demo

🎯 작업

이 프로젝트에서 다음을 배우게 됩니다.

드로잉 보드 웹 애플리케이션의 HTML 구조를 설정하는 방법.
HTML <canvas> 요소의 2D 렌더링 컨텍스트를 생성하고 얻는 방법.
그리기를 위한 마우스 동작을 추적하기 위해 이벤트 리스너를 구현하는 방법.
"지우기 (Clear)" 버튼을 추가하고 캔버스를 지우는 기능을 구현하는 방법.
색상 선택기 입력을 생성하고 브러시 색상을 변경하는 기능을 구현하는 방법.
브러시 크기를 조정하기 위한 범위 입력을 추가하고 기능을 구현하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

HTML 을 사용하여 기본 웹 페이지 구조를 만듭니다.
JavaScript 이벤트 리스너를 사용하여 사용자 상호 작용을 처리합니다.
그리기를 위해 HTML <canvas> 요소를 사용합니다.
CSS 를 사용하여 웹 애플리케이션의 스타일을 지정합니다.
HTML, CSS 및 JavaScript 를 결합하여 기능적인 드로잉 보드를 구축합니다.

HTML 구조 생성

요구 사항:

index.html 파일을 엽니다.
캔버스, 헤더 및 제어 요소가 있는 index.html에서 기본 HTML 구조를 설정합니다.

기능:

프로젝트 파일과 기본 HTML 구조가 생성되지만 아직 그리기 기능은 없습니다.

단계:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Drawing Board</title>
  </head>
  <body>
    <header>
      <h1>Drawing Board</h1>
    </header>
    <div class="container">
      <div class="controls">
        <input type="color" id="color-picker" value="#000000" />
        <label for="brush-size">Brush Size:</label>
        <input type="range" id="brush-size" min="1" max="20" value="5" />
        <button id="clear-btn">Clear</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Canvas 추가

요구 사항:

index.html에서 ID 가 "whiteboard"이고 원하는 치수 (너비 및 높이) 를 가진 <canvas> 요소를 추가합니다.

기능:

캔버스가 웹 페이지에 추가되지만, 아직 그리기 기능은 없습니다.

단계:

<body>
  <header>
    <h1>Drawing Board</h1>
  </header>
  <div class="container">
    <!--add canvas-->
    <canvas id="whiteboard" width="800" height="400"></canvas>
    <div class="controls">
      <input type="color" id="color-picker" value="#000000" />
      <label for="brush-size">Brush Size:</label>
      <input type="range" id="brush-size" min="1" max="20" value="5" />
      <button id="clear-btn">Clear</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

그리기 기능 추가

요구 사항:

script.js에서 마우스를 클릭하고 움직일 때 캔버스에 그릴 수 있도록 JavaScript 코드를 추가합니다.
mousedown, mouseup, 그리고 mousemove 이벤트에 대한 이벤트 리스너 (event listener) 를 구현합니다.

기능:

이제 사용자는 마우스를 사용하여 캔버스에 그릴 수 있습니다.

단계:

const canvas = document.getElementById("whiteboard");
const context = canvas.getContext("2d");

let drawing = false;

canvas.addEventListener("mousedown", () => {
  drawing = true;
  context.beginPath();
});

canvas.addEventListener("mouseup", () => {
  drawing = false;
  context.closePath();
});

canvas.addEventListener("mousemove", draw);

function draw(e) {
  if (!drawing) return;

  context.lineCap = "round";

  context.lineTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
  context.stroke();
  context.beginPath();
  context.moveTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
}

이 코드는 마우스를 클릭하고 움직일 때 캔버스에 그릴 수 있도록 합니다.

지우기 기능 추가

요구 사항:

script.js에서 "Clear" 버튼을 클릭하면 캔버스를 지우는 JavaScript 코드를 추가합니다.
index.html에서 ID 가 "clear-btn"인 버튼을 생성합니다.

기능:

사용자는 캔버스를 지우고 새로운 그림을 시작할 수 있습니다.

단계:

const clearButton = document.getElementById("clear-btn");

clearButton.addEventListener("click", () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
});

이 코드는 사용자가 "Clear" 버튼을 클릭하여 캔버스를 지울 수 있도록 합니다.

브러시 색상 제어 기능 추가

요구 사항:

script.js에서 <input type="color"> 요소를 사용하여 사용자가 브러시 색상을 선택할 수 있도록 JavaScript 코드를 추가합니다.
index.html에서 ID 가 "color-picker"인 색상 선택기 입력 (color picker input) 을 생성합니다.

기능:

사용자는 브러시의 색상을 선택할 수 있습니다.

단계:

const colorPicker = document.getElementById("color-picker");

colorPicker.addEventListener("input", (e) => {
  context.strokeStyle = e.target.value;
});

이 코드는 사용자가 색상 선택기를 사용하여 브러시 색상을 선택할 수 있도록 합니다.

브러시 크기 조절 기능 추가

요구 사항:

script.js에서 <input type="range"> 요소를 사용하여 사용자가 브러시 크기를 조절할 수 있도록 JavaScript 코드를 추가합니다.
index.html에서 ID 가 "brush-size"인 범위 입력 (range input) 을 생성합니다.

기능:

사용자는 브러시 크기를 변경하여 더 두껍거나 얇은 선을 만들 수 있습니다.

단계:

const brushSizeInput = document.getElementById("brush-size");

brushSizeInput.addEventListener("input", (e) => {
  context.lineWidth = e.target.value;
});

이 코드는 사용자가 범위 입력을 사용하여 브러시 크기를 조절할 수 있도록 합니다.

CSS 스타일링

요구 사항:

styles.css 파일을 엽니다.
웹 앱을 시각적으로 매력적으로 만들기 위해 CSS 스타일을 추가합니다.

기능:

웹 앱 요소에 기본적인 스타일을 적용합니다.

단계:

body {
  font-family: "Arial", sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

header {
  background: linear-gradient(135deg, #57efbf, #64a8e4);
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  background: linear-gradient(125deg, #67a5f5, #f3bbe0, #64a0e4, #d364e4);
  border-radius: 10px;
  padding: 10px;
}

canvas {
  background-color: #f4f0eb;
  background-size: cover;
  border: 1px solid #919396;
  box-shadow: 0 10px 20px rgba(16, 16, 16, 0.567);
}

.controls {
  margin-top: 10px;
}

label {
  font-weight: bold;
  margin-right: 5px;
  color: #fff;
}

input[type="color"],
input[type="range"] {
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  background-color: #4be2ed;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #dac765;
}

button:focus {
  outline: none;
}

앱 실행

웹 브라우저에서 index.html을 엽니다.
지출을 추가하고 지출 목록과 요약이 올바르게 업데이트되는지 확인하여 애플리케이션을 테스트합니다.
페이지의 효과는 다음과 같습니다:

요약

축하합니다! HTML, CSS 및 JavaScript 를 사용하여 간단한 그림판 웹 애플리케이션을 만들었습니다. 사용자는 캔버스에 그림을 그리고, 브러시 색상을 변경하고, 브러시 크기를 조정할 수 있습니다.