Получить профессию в Skypro
Реализация рисования мышью на HTML5 Canvas с JS
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для создания рисунков с помощью мыши непосредственно на "холсте" (canvas) необходимо ввести несколько строчек JavaScript кода. Вначале подготовьте сам элемент канваса:
<canvas id="drawCanvas" width="300" height="300"></canvas>Затем задайте обработчики событий для мыши:
const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
canvas.onmousedown = ({offsetX, offsetY}) => {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(offsetX, offsetY);
};
canvas.onmousemove = ({offsetX, offsetY}) => {
if (isDrawing) {
ctx.lineTo(offsetX, offsetY);
ctx.stroke();
}
};
canvas.onmouseup = () => {
isDrawing = false;
};Нажмите и перемещайте мышь по канвасу, наблюдая за тем, как рисунок преобразуется. Чтобы сделать рисунок еще более детализированным, настройте свойства ctx.lineWidth и ctx.strokeStyle.
Улучшаем инструменты для рисования
Совершенствуйте инструмент для рисования, дополняя его новыми возможностями и улучшениями.
Добавляем настройки по выбору
Вставьте выбор цвета и регулировку толщины линии:
<label>Выберите цвет: <input type="color" id="colorPicker" value="#000000"></label>
<label>Настройте ширину линии: <input type="number" id="lineWidth" min="1" value="1"></label>Синхронизируйте цвет и толщину линии с выбранными параметрами:
const colorPicker = document.getElementById('colorPicker');
const lineWidth = document.getElementById('lineWidth');
ctx.strokeStyle = colorPicker.value;
ctx.lineWidth = lineWidth.value;
colorPicker.addEventListener('change', () => ctx.strokeStyle = colorPicker.value);
lineWidth.addEventListener('change', () => ctx.lineWidth = lineWidth.value);Сохраняем результат
Добавим кнопку для сохранения созданного рисунка:
<button id="saveBtn">Сохранить свой шедевр 🏛️</button>Инициируйте сохранение при нажатии на созданную кнопку:
document.getElementById('saveBtn').addEventListener('click', () => {
const dataURL = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = dataURL;
a.download = 'canvas-masterpiece.png';
a.click();
});Вносим исправления и корректировки
Добавим функцию исправления ошибок с помощью стирки:
<button id="eraserBtn">Забудем, что это было 🧽</button>При включении режима стирания переключайтесь на прозрачный цвет или на цвет фона:
document.getElementById('eraserBtn').addEventListener('click', () => {
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 10;
});Не забывайте возвращать стандартные настройки после работы стирки:
colorPicker.addEventListener('change', () => {
ctx.globalCompositeOperation = 'source-over';
ctx.strokeStyle = colorPicker.value;
});Визуализация
Представим наглядно процесс рисования на HTML5 Canvas с помощью символики Emoji:
Холст ➡️ [🎨]
Движение мыши ➡️ [🐭🖌️]
Активность рисования ➡️ [👨🎨]Воспринимайте мышь как свой цифровой кистью:
Нажатие кнопки [🐭🖌️]: Начинаем рисование
Перемещение [🖌️➡️🖼️]: Продолжаем набросок
Отпускание кнопки [✋]: Завершаем процесс рисованияНаслаждайтесь процессом создания искусства:
Перед началом: [Чистый лист 🕳️]
Во время рисования: [Наносим рисунок 🌈🖌️]
После завершения: [Готовое произведение 🖼️✨]Основы объектно-ориентированного программирования: Упакуем ваш код в класс
Каждое действие — это роль, а исполнителем становится класс SignTool:
class SignTool {
constructor(canvasId, options) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d');
this.setOptions(options);
this.attachEventListeners();
}
// ...дальнейшие разработки
}Создавайте масштабируемые приложения, которые умеют подстраиваться под любые экраны:
resizeCanvas() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
this.ctx.strokeStyle = this.options.color;
this.ctx.lineWidth = this.options.lineWidth;
}Овладейте ctx.lineJoin и ctx.lineCap для создания более плавных линий. Пробуйте ctx.createPattern() и ctx.createLinearGradient(), чтобы придать изображению атмосферу. Если вы готовы к большему, воспользуйтесь pressure.js, чтобы имитировать давление кисти при рисовании.
Полезные материалы
- MouseEvent – Веб-API | MDN – документация по работе с мышью.
- Руководство по работе с линиями в HTML5 Canvas – создание уникальных линий на канвасе.
- CanvasRenderingContext2D – Веб-API | MDN – справочник API для рисования в 2D.
- Сенсорные события – Веб-API | MDN – руководство по сенсорным событиям для мобильных устройств.
- Руководство по работе с HTML5 Canvas: Введение — SitePoint – основы работы с Canvas для начинающих.