Paint
Опубликовано 5 декабря, 2023 - 14:32 пользователем Гуров Богдан
Холст для рисования представлен с помощью <canvas>
, к нему добавлен addEventListener('mousemove', (...))
и если нажата левая клавиша мыши рисует линию с помощью пути:
ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x - dx, y - dy); ctx.stroke(); ctx.closePath();
Для настроек кисти используется object:
const options = { penSize: 5, penColor: "Black", };
Линия рисуется, используя цвет из options
Выбор цвета(button) и размера кисти(<input type="range">
) меняют соответствующее значение в options
Определение цвета по текстовому полю реализовано с помощью регулярного выражения, таким образом что допустимыми значениями будут (123 , 123 ,123) и (123,123,123), (123, 123, 123) и тд. Каждое значение R, G и B является отдельной группой в регулярном выражении.
Направление: