HTML - Velocity Draw

Введение в Velocity Draw

Здравствуйте, будущие веб-разработчики! Сегодня мы отправимся в увлекательное путешествие в мир HTML и замечательного这个小ого инструмента под названием Velocity Draw. Как ваш доброжелательный соседский компьютерный учитель, я здесь, чтобы провести вас через это приключение шаг за шагом. Не волнуйтесь, если вы никогда не писали ни строчки кода раньше - мы начинаем с нуля!

Что такое Velocity Draw?

Velocity Draw - это простая, но мощная HTML5 canvas-ориентированная рисующая программа. Она позволяет пользователям создавать рисунки, передвигая мышь или палец (на сенсорных устройствах) по экрану. А coolest часть? Чем быстрее вы двигаетесь, тем тоньше линия становится!

Настройка нашего HTML файла

Давайте начнем с создания базовой структуры HTML для нашей программы Velocity Draw. Откройте ваш любимый текстовый редактор и введите следующий код:

<!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>

Здесь мы создаем базовый HTML документ с элементом canvas, где мы будем рисовать, и тегом script, где мы будем писать наш JavaScript код.

JavaScript магия: делаем canvas интерактивным

Теперь добавим немного JavaScript, чтобы наш canvas стал интерактивным. Мы разберем его на мелкие, удобоваримые части:

1. Настройка canvas

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

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

Здесь мы берем наш элемент canvas, получаем его 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 - это место, где происходит магия - она calculates的速度 на основе того, насколько мышь moved и регулирует ширину линии соответственно.

Объединяем все вместе

Теперь, когда у нас есть все части, давайте объединим их в наш 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 многократно. Он рисует линию от последнего положения до текущего.
Скорость calculate на основе того, насколько мышь moved с последнего вызова.
Ширина линии устанавливается обратно пропорционально скорости - быстрее движение结果是 тоньше линии.
Когда вы отпускаете кнопку мыши или передвигаете ее за пределы canvas, вызывается stopDrawing, который останавливает процесс рисования.

Заключение

Поздравления! Вы только что создали свою собственную программу Velocity Draw. Неужели это потрясающе, как несколько строк кода могут создать что-то такое интерактивное и интересное? Пока вы играете с новым инструментом рисования, подумайте, как вы можете его расширить. Можете ли вы добавить цветовые опции? А как насчет разных стилей кисти?

помните, ключ к тому, чтобы стать великим программистом, - это эксперимент и практика. Так что не останавливайтесь здесь - продолжайте исследовать, продолжайте программировать и, самое главное, продолжайте получать удовольствие!

Метод	Описание
`getElementById`	Получает элемент из DOM по его ID
`getContext`	Получает контекст отрисовки для canvas
`addEventListener`	Присоединяет обработчик событий к элементу
`beginPath`	Начинает новый путь в canvas
`moveTo`	Перемещает курсор рисования в указанную точку
`lineTo`	Рисует линию от текущей точки до указанной точки
`stroke`	Отображает определенный путь с текущим стилем штриха
`Math.sqrt`	Вычисляет квадратный корень числа
`Math.pow`	Raise число в указанную степень
`Math.max`	Возвращает наибольшее из нуля или более чисел

Счастливого кодирования, будущие веб-волшебники!

Credits: Image by storyset

Предыдущий учебник:

HTML - Web-слайдовый стол

Следующий учебник:

HTML - QR-код