Автор оригинала: FreeCodeCamp Community Member.
Ashish Nandan Singh
Недавно во время вызова JavaScript 30 Days у меня была возможность загрязнены своими руками с HTML встроенным холстом имуществом. Что убедило меня, чтобы написать об этом опыте, был относительный уровень комфорта и кривой обучения.
В своей простейшей форме HTML-элемент HTML позволяет веб-разработчику привлечь графику на веб-странице через JavaScript, и этот очень аспект делает этот HTML-элемент гораздо более интересным.
Возвращаться к
Марка выглядит так:
Начало
Хорошо так много для введения. Давайте сосредоточимся на создании чего-то веселья, используя какое-то простой старый JavaScript, (не старый – ES6!). Во-первых, мы посмотрим на файлы стартера.
Давайте сломаемся. У нас есть таблица стилей с именем style.css. Тогда мы идем о определении холст Элемент с 800 шириной и высотой 800. Наконец, у нас есть Сценарий Тег имени app.js где происходит вся магия. На этой записке давайте начнем делать вещи с нашим собственным App.js.
- Начнем с выбора элемента холста в первой строке и храните значение в переменной Const с именем холст для простоты.
- Затем мы захватываем контекст того же холста в 2D-аспекте и установили его на Переменная.
- Установите ширину и высоту холста, чтобы быть внутренней шириной окна и высоты соответственно.
Теперь, когда у нас наконец-то наш холст на месте мы переходим к определению самых основных атрибутов холста.
- CTX.strokestyle Устанавливает или возвращает цвет, градиент или шаблон, используемый для ударов. Да, вы прочитаете правильно: цвет по умолчанию выглядит #Badass.
- CTX.Linewidth S ETS или возвращает текущую ширину строки. Мы установили его на 1, и мы придем к этому позже.
- CTX.Linejoin s или возвращает тип угла, созданного, когда встречаются две строки. Мы установили его на раунд, так что когда встречаются две линии, у нас есть аккуратная точка соединения.
- CTX.LineCap Устанавливает или возвращает стиль конечных колпачков для линии. Мы устанавливаем его на раунд, чтобы, когда мы не встречаем никакой другой линии, мы все еще в конечном итоге получаем такую же фигуру аккуратной трубы в зависимости от ширины инсульта, определенного ранее.
Теперь, когда у нас есть все эти вещи на месте, давайте посмотрим, как мы можем пойти на фактически рисунок на холсте.
Во-первых, нам нужно добавить некоторые слушатели событий для движения мыши на холсте, а затем вызвать функцию, которая фактически нарисовал что-то на холсте. Давайте посмотрим на дополнения, которые мы можем иметь в файле App.js.
Давайте сломаем это:
- Мы начинаем с определения переменной под названием Isdrwaing Что поможет нам выяснить, действительно ли пользователь на самом деле пытается нарисовать на холсте или нет. Мы вернемся к этому позже.
- На данный момент давайте имеем функцию под названием рисовать который будет вызван, а позже будет нести ответственность за все действия.
- Наконец, мы добавляем кучу для слушателей событий для различных событий, чтобы убедиться, что мы захватываем правильные события и только выполнить рисовать функция, когда это необходимо.
Объявляя Isdrawing Переменная и установка его свойства для Ложь, Мы устанавливаем Первоначальное состояние холста, как только элемент холста загружен как не рисунок. Затем в каждом последующем слушателю событий мы используем Встроенная функция и изменить значение Isdrawing Функция каждый раз в соответствии с типом события уволена.
В начале функции розыгрыша, если значение Isdrawing Установлено значение FALSE, функция вызывается после столкновения оператора возврата. Если Isdrawing Установлено значение true, функция розыгрыша выполняется.
Функция рисования
Давайте расширемся на этой функции розыгрыша:
- Начнем с определения двух переменных глобально, LastX, LANCY, и установите начальное значение 0.
- Если вы идете на консоль вашего браузера сейчас, вы увидите, что у вас есть огромный журнал всех движений мыши, которые вы делаете. Это Мышевинт Объект имеет некоторые очень важные и полезные свойства:
Мы заинтересованы только в недвижимости Offsetx и Offsety этого объекта.
- С самой ctx.beginpath, Мы начинаем путь или сбросить текущий путь. Оба из которых мы хотим, мы делаем для каждого срабатывания события.
- ctx.moveto Перемещает путь к указанной точке в холсте, не создавая строку. В нашем случае это будет последний тек и длительный характер, определенный вне функции в глобальном масштабе.
- ctx.lineto Добавляет новую точку и создает линию к этой точке с последней указанной точки в холсте.
- ctx.stroke () На самом деле рисует путь, который вы определили – настоящий трудолюбивый, парни!
Внутри CTX.LineTo, Мы используем свойство мероприятия Offsetx и OUTFSETY Чтобы получить последнюю точку x и y в холсте, только чтобы нарисовать линию с ctx.lineto.
У нас есть почти все на месте. Каждое событие мыши на веб-странице рисует линию на холсте – но с некоторыми проблемами и не намного слабач. Так что давайте добавим немного Swag.
Раскачиваться!
На данный момент все линии обращаются от точки 0 и 0 в холсте. Мы устанавливаем это как начальный набор точек, чтобы начать рисунок, когда мы загружаем холст или даже когда мы выполняем функцию розыгрыша.
Давайте починить это, чтобы иметь лучший опыт в реальном времени. Если вы думаете об этом, ответ очень прост: каждый раз, когда выполняется функция рисования, мы хотим, чтобы начальная точка всегда была Offsetx и OUTFSETY Собственность Наземный объект Отказ
Используя деструкурующую массив ES6, мы можем сбросить значения LastX и LANTY, чтобы быть свойством OFFSETX и OFFSETY INCEVESTION объекта MouseEvent. Мы можем сделать это в самом конце функции розыгрыша. Давайте посмотрим на файл app.js после добавления некоторых Swag в нем.
- Как только MouseMove Событие происходит, мы огоньте функцию розыгрыша. Затем мы идем вперед и устанавливаем значение lastX и просто в функции розыгрыша с использованием деструкурирования ES6.
- В случае Mousedown Событие, сначала мы изменим встроенную функцию для блокировки, как вы можете видеть, а затем мы снова устанавливаем значения LastX и FACTY, чтобы быть свойством смещения события. Это, чтобы убедиться, что у нас есть линию, видимая нам на холсте, пока мы переходим с одной точки в другую точку в холсте.
Давайте сделаем его красочным и добавьте некоторую динамику в ходу.
Святая Моли !!
Это много, чтобы справиться, но давайте сломаемся.
- Я определил новую переменную под названием оттенок и установить его свойство на 0.
- Если вы еще не знаете о оттенках и почему это потрясающе, отправляйтесь в Google и попробовать, или просто Нажмите здесь Отказ
В своей простейшей форме HSL позволяет нам использовать ту же радугу цветов от 0 до 360. Каждое число имеет значение легки и альфа. Определение HSL выглядит что-то подобное: HSL (173, 99%, 50%). Здесь номер 173 представляет собой цвет – 99% – это легкость, а 50% – это альфа-значение.
Опять же, используя некоторые удивительные Backticks ES6, мы можем использовать HSL и влиять на его, делая что-то подобное:
ctx.strokestyle = `HSL ($ {hue}, 100%, 50%)`
Как мы сделали на линии 7 в вышеупомянутом гисте.
Далее мы увеличиваем ценность оттенок Переменная, которая меняет цвет хода с каждым MouseMove мероприятие. Как только значение оттенка было увеличено до 360, мы сбрасываем значение оттенка, чтобы быть 0 в строке 14 вышеупомянутого цита. Но даже если мы этого не сделаем, у нас все равно будет тот же результат. Даже так, давайте просто сделаем правильные вещи.: D LOL.
Если (Hue> 360) {
Hue =
0 }
Далее давайте добавим некоторую динамику на ширину инсульта каждый раз, когда это:
Если (ctx.linewidth> = 75
) {
направление =! прямой ион;
Если (направление) {
ctx.linewidth ++
} else {
}
Все, что мы сделали здесь, сначала проверьте, если текущий Сландвидность больше 75 или меньше 1. Если это так, то мы поменяем значение переменной направление который установлен в соответствии с true по умолчанию.
Далее мы проверяем, если значение переменной направление правда. Если это так, то увеличивайте значение LILEWIDTH на 1, иначе сбросьте Сландвидность быть 0.
Это было не очень много JavaScript. Теперь у вас должен быть ваш красивый холст, если вы будете следить за правильным.
Давайте посмотрим, как выглядит окончательная структура файлов. Поскольку мы только изменили только файл app.js, я покажу вам только то, что, поскольку index.html остается почти без изменений с самого начала.
Это только верхушка айсберга, когда думает об общей мощности элемента холста, в сочетании с JavaScript. Я бы побудил вас сделать немного больше исследования и заставить холст выглядеть еще лучше. Может быть, добавьте пару кнопки, чтобы очистить экран, или, возможно, выберите определенный цвет, чтобы нарисовать на холсте. Так много вариантов!
Все, что я говорю, есть миллионные способы сделать это лучше. Я обязательно обновит историю, если у меня есть что-нибудь стоимость обновления.
Наконец, я бы хотел оставить вас с видео о том, как холст будет выглядеть в самом конце.
Надеюсь, тебе понравилось читать все это! Любые комментарии или предложения для улучшения или обсуждения этого дальнейшего будут оценены. Вы можете подключиться со мной на Twitter и LinkedIn также.