HTML - Velocity Draw

Velocity Draw 소개

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 HTML과 재미있는 작은 도구인 Velocity Draw로 가는 흥미로운 여정을 시작할 것입니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 이 모험을 단계별로 안내해 드리겠습니다. 코드를 한 줄도 적어본 적이 없으신 분들도 걱정하지 마세요 - 우리는 처음부터 시작하니까요!

Velocity Draw는 무엇인가요?

Velocity Draw는 간단하면서도 강력한 HTML5 캔버스 기반 그림 그리기 애플리케이션입니다. 사용자는 마우스나 터치 기기에서 손가락을 이동하여 그림을 만들 수 있습니다. coolest 부분? 더 빠르게 이동할수록 선이 더 얇아집니다!

HTML 파일 설정

우리의 Velocity Draw 애플리케이션을 위한 기본 HTML 구조를 만들기 시작해 보겠습니다. 좋아하는 텍스트 편집기를 열고 다음 코드를 입력하세요:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
// JavaScript 코드를 여기에 넣을 거예요
</script>
</body>
</html>

이 코드는 그림을 그릴 캔버스 요소와 JavaScript 코드를 작성할 스크립트 태그를 포함한 기본 HTML 문서를 설정합니다.

JavaScript 마법: 캔버스 상호작용

이제 캔버스를 상호작용하도록 JavaScript를 추가해 보겠습니다. 작은, 소화 가능한 조각으로 나누겠습니다:

1. 캔버스 설정

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

여기서 우리는 캔버스 요소를 가져오고, 그 2D 렌더링 컨텍스트를 얻고, 캔버스 크기를 전체 창을 채우도록 설정합니다.

2. 마우스 이동 추적

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

우리는 그림을 그리는지 여부, 마지막 마우스 위치, 현재 속도를 추적하기 위한 변수를 설정하고, 마우스 동작에 대한 이벤트 리스너를 추가합니다.

3. 그리기 함수 구현

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

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

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}

이 함수들은 실제 그리기를 처리합니다. draw 함수는 마우스가 얼마나 이동했는지 계산하고, 선의 두께를 조절하는 데 사용됩니다.

모든 것을 함께 모음

이제 모든 조각을 가지고 우리의 HTML 파일로 모아보겠습니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

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

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}
</script>
</body>
</html>

작동 방식

마우스 버튼을 눌렀을 때, startDrawing이 호출되어 isDrawing을 true로 설정하고 시작 위치를 기록합니다.
마우스를 이동할 때마다 draw가 반복적으로 호출됩니다. 마지막 위치에서 현재 위치로 선을 그립니다.
속도는 마우스가 얼마나 이동했는지에 따라 계산됩니다.
선의 두께는 속도에 반비례합니다 - 빠르게 이동하면 선이 얇아집니다.
마우스 버튼을 뗄 때나 캔버스를 벗어났을 때, stopDrawing이 호출되어 그리기 과정을 중단합니다.

결론

축하합니다! 여러분은 자신만의 Velocity Draw 애플리케이션을 만들었습니다. 코드 몇 줄로 이렇게 상호작용적이고 재미있는 것을 만들 수 있다는 것이 놀라운 일 아닐까요? 새로운 그리기 도구를 놀러보면서, 색상 옵션을 추가하거나 다른 브러시 스타일을 추가할 수 있을지 생각해보세요.

기억하세요, 훌륭한 프로그래머가 되는 열쇠는 실험과 연습입니다. 이제 멈추지 말고, 계속 탐구하고, 코딩을 계속하고, 가장 중요한 것은 즐거움을 유지하세요!

메서드	설명
`getElementById`	DOM에서 ID로 요소를检索합니다
`getContext`	캔버스의 렌더링 컨텍스트를 가져옵니다
`addEventListener`	요소에 이벤트 처리기를 연결합니다
`beginPath`	캔버스에서 새로운 경로를 시작합니다
`moveTo`	그리기 커서를 지정된 지점으로 이동합니다
`lineTo`	현재 지점에서 지정된 지점으로 선을 그립니다
`stroke`	정의된 경로를 현재 스타일로 그립니다
`Math.sqrt`	숫자의 제곱근을 계산합니다
`Math.pow`	숫자를 지정된 거듭제곱합니다
`Math.max`	ноль이상의 숫자 중 가장 큰 값을 반환합니다

미래의 웹 마법사 여러분, 즐겁게 코딩하세요!

Credits: Image by storyset