Простой скрипт для рисования Javascript
Добавить в избранное
Хотите создать свой собственный «скрипт для рисования»? Или хотите узнать больше о canvas HTML? Вот простой пример – читайте дальше!
СКРИПТ ДЛЯ РИСОВАНИЯ НА JAVASCRIPT
Хорошо, давайте теперь более подробно рассмотрим, как работает скрипт для рисования Javascript.
ЧАСТЬ 1) HTML
создаём файл index.html
<html lang="ru">
<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">
<title>draw</title>
<style>
body {
background-color: blue;
}
#wrapper {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
#canvas {
width: 100%;
height: 500px;
}
#cClear, #cSave {
background-color: yellow;
color: #000;
font-size: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- (A) CANVAS -->
<canvas id="canvas"></canvas>
<!-- (B) DRAW CONTROLS -->
<div id="controls">
<input type="button" value="очистить" id="cClear">
<input type="color" id="cColor">
<input type="number" min="1" max="9" value="1" id="cSize">
<a id="cSave" download="draw.jpg">Сохранить</a>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
Интерфейс HTML довольно прост.
A. Холст, на котором можно рисовать.
B. Элементы управления холстом — кнопка «Очистить», палитра цветов, размер краски, сохранение холста в файл.
ЧАСТЬ 2) JAVASCRIPT
создайте файл js.js
// (A) ХАРАКТЕРИСТИКИ
canvas: null, // html canvas
ctx: null, // html canvas context
px: null,
py: null, // предыдущие координаты мыши
cx: null,
cy: null, // текущие координаты мыши
go: false, // флаг для управления краской
// (B) INIT
init: () => {
// (B1) ПОЛУЧИТЬ HTML-ЭЛЕМЕНТЫ
draw.canvas = document.getElementById("canvas");
draw.ctx = draw.canvas.getContext("2d");
// (B2) УСТАНОВИТЕ ШИРИНУ И ВЫСОТУ ХОЛСТА
draw.canvas.width = draw.canvas.offsetWidth;
draw.canvas.height = draw.canvas.offsetHeight;
// (B3) НАСТРОЙКИ РИСОВАНИЯ ПО УМОЛЧАНИЮ
draw.ctx.fillStyle = "#ffffff";
draw.ctx.strokeStyle = "#000000";
draw.ctx.lineWidth = 1;
draw.ctx.fillRect(0, 0, draw.canvas.width, draw.canvas.height);
// (B4) ПРИСОЕДИНИТЕ СРЕДСТВА УПРАВЛЕНИЯ ТЯГОЙ
// (B4-1) ЧИСТЫЙ ХОЛСТ
document.getElementById("cClear").onclick = () => {
draw.ctx.fillRect(0, 0, draw.canvas.width, draw.canvas.height);
};
// (B4-2) РИСОВАТЬ ЦВЕТ
document.getElementById("cColor").onchange = (e) => {
draw.ctx.strokeStyle = e.target.value;
};
// (B4-3) РАЗМЕР РИСУНКА
document.getElementById("cSize").onchange = (e) => {
draw.ctx.lineWidth = e.target.value;
};
// (B4-4) СОХРАНИТЬ ХОЛСТ
document.getElementById("cSave").onclick = (e) => {
e.target.href = draw.canvas.toDataURL("image/jpg");
};
// (B5) ВКЛЮЧИТЬ/ОТКЛЮЧИТЬ КРАСКУ
let disengage = () => {
draw.px = null; draw.py = null; draw.go = false;
};
draw.canvas.addEventListener("mousedown", (e) => draw.go = true);
draw.canvas.addEventListener("mouseup", disengage);
draw.canvas.addEventListener("mouseout", disengage);
draw.canvas.addEventListener("mousemove", draw.paint);
},
// (C) КРАСКА
paint: (e) => { if (draw.go) {
// (C1) ПОЛУЧИТЬ КООРДИНАТЫ МЫШИ CANVAS
let cRect = draw.canvas.getBoundingClientRect();
draw.cx = Math.round(e.clientX - cRect.left);
draw.cy = Math.round(e.clientY - cRect.top);
// (C2) УСТАНОВИТЬ НАЧАЛЬНЫЕ КООРДИНАТЫ
if (draw.px == null || draw.py == null) {
draw.px = draw.cx;
draw.py = draw.cy;
}
// (C3) DRAW
draw.ctx.beginPath();
draw.ctx.moveTo(draw.px, draw.py);
draw.ctx.lineTo(draw.cx, draw.cy);
draw.ctx.stroke();
// (C4) ОБНОВИТЬ КООРДИНАТЫ
draw.px = draw.cx;
draw.py = draw.cy;
}}
};
window.onload = draw.init;
• Объект drawсодержит всю механику рисования.
• (B) Запустится при загрузке окна draw.init(). То, что он делает, на самом деле очень просто, если вы его изучите —
◦ (от B1 до B3) Получите холст HTML и инициализируйте его.
◦ (B4) Прикрепите элементы управления рисованием — очистите холст, установите цвет и размер рисунка и сохраните холст в виде файла JPG.
• (B5 и C) Здесь происходит основная часть «действия рисования».
◦ (B5) При нажатии кнопки мы задействуем draw.go = true.
◦ (C) draw.paint() теперь будет отслеживать движение мыши в пределах холста.
◦ (C1) Получить текущие координаты мыши на холсте.
◦ (C2 To C4) По мере движения мыши мы отслеживаем координаты «на лету» и рисуем на холсте.
◦ (B5) Мы прекращаем отслеживать и рисовать, когда мышь поднимается вверх, или когда мышь покидает холст — draw.go = false; draw.px = null; draw.py = null.
вы можете посмотреть и скачать пример.
Посмотреть
Скачать