Веселье с холстом HTML5

Когда линия встречается с другой линией, мы хотим убедиться, что концы будут круглыми, и что их концы будут круглыми. Это можно сделать, установив для контекста холста lineJoin и LineCap значение round.

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

ctx.strokeStyle = "#BADA55";

ctx.lineJoin = "круглый";

ctx.lineCap = «круглый;

Мы создадим три переменные isDrawing, lastX и lastY в качестве отправных точек для пользователя. isDrawing, чтобы сообщить нам, рисует ли пользователь, и координаты осей x и y. Я расскажу об этом позже.

пусть isDrawing = false;

пусть lastX = 0;

пусть lastY = 0;

Мы создадим функцию с именем draw, которая будет принимать событие и регистрировать это событие. Мы также хотим добавить прослушиватель событий при каждом перемещении пользователя свою мышь и выполнить наш рисунок функция.

функция рисования(e){

console.log(e)

}

canvas.addEventListener(‘mousemove’, draw)

Теперь мы можем видеть события мыши на консоли, но мы хотим регистрировать эти события только тогда, когда пользователь рисует. Сначала нам нужно проверить, если пользователь не рисует, поэтому давайте напишем это в нашей функции draw. Во-вторых, мы хотим регистрировать наши события только тогда, когда пользователь нажимает вниз на мыши. Мы добавим еще один mousedown прослушиватель событий на холст и переключим isDrawing на true. Нам нужно знать, когда пользователь закончил рисовать, поэтому мы также добавим mouseup и mouseout прослушиватели событий, где мы установим для isDrawing значение false.

функция рисования(е){

если(!isDrawing) вернуть

console.log(e)

}

canvas.addEventListener("mousemove", draw);

canvas.addEventListener("mousedown", () =› (isDrawing = true));

canvas.addEventListener("mouseup", () =› (isDrawing = false));

canvas.addEventListener("mouseout", () =› (isDrawing = false));

Теперь, когда у нас настроены прослушиватели событий, мы можем приступить к написанию кода для рисования. Мы начнем с того, что сообщим нашему контексту холста, чтобы он начал новый путь, используя beginPath. Нам нужно указать наши начальные координаты, и мы сделаем это, используя moveTo для ctx и передав lastX и последнийY. Нам также нужно указать наши конечные координаты, которые мы будем использовать lineTo и передать в e.offsetX и e.offsetY. Их можно найти в консоли, и эта информация предоставляется нам каждый раз, когда пользователь нажимает кнопку вниз. Наконец, мы ничего не увидим на странице, если назовем ctx.stroke.

функция draw(e) {

если возврат (!isDrawing);

console.log(e);

ctx.beginPath();

ctx.moveTo(последнийX, последнийY);

ctx.lineTo(e.offsetX, e.offsetY);

ctx.stroke();

}

Это немного рисует на странице, но что происходит? Мышь всегда будет начинать с 0 как по оси X, так и по оси Y. Нам нужно обновить наши X и Y ось после того, как пользователь отпустит мышь.

функция draw(e) {

если возврат (!isDrawing);

console.log(e);

ctx.beginPath();

ctx.moveTo(последнийX, последнийY);

ctx.lineTo(e.offsetX, e.offsetY);

ctx.stroke();

[последнийX, последнийY] = [e.offsetX, e.offsetY];

}

Немного лучше, но мы по-прежнему начинаем с оси 0 и продолжаем с того места, где в последний раз остановился пользователь, оставляя нас с одной длинной строкой. Мы перейдем к прослушивателю событий mousedown и добавим также update в наш lastX и последнийY. Поскольку mousedown происходит до mousemoove, теперь наши оси X и Y будут обновляться до того, как мы начнем рисовать.

canvas.addEventListener("mousedown", e =› {

isDrawing = true;

[последнийX, последнийY] = [e.offsetX, e.offsetY];

});

Мы хотим, чтобы рисуемые линии были немного больше, чтобы мы могли исправить это в нашем контексте, задав lineWidth до 100.

ctx.lineWidth = 100;

Мы также хотим изменить мазок кисти, поэтому мы будем использовать HSL для программирования цветов.

Оттенок — какой цвет

Насыщенность — насколько ярко

Легкость — сколько света

Мы начнем с объявления переменной с именем hue и установим для нее значение 0. Внутри нашей функции draw мы установим для context strokeStyle значение hsl и используйте ES6 для интерполяции оттенка.