Произведите свое воскресенье (или любой день) с элементом canvas и JavaScript.

1656647414 proizvedite svoe voskresene ili lyuboj den s elementom canvas i

Содержание статьи

автор Ашиш Нандан Сингх

1*1d6oMjjsNM4QrprjTxb87w

Недавно во время 30-дневного задания JavaScript я имел возможность запачкать руки над свойством canvas, встроенным в HTML. Что убедило меня написать обо всем опыте, так это относительный уровень комфорта и кривая обучения.

В самой простой форме элемент canvas HTML позволяет веб-разработчику рисовать графику на веб-странице с помощью JavaScript, и именно этот аспект делает этот элемент HTML гораздо более интересным.

The s> – это просто контейнер – вы всегда использовали бы JavaScript для фактического рисования графики. Кто-то может возразить, что мы всегда можем добавить точки или, возможно, SVG, но опять же – что это будет весело? 😀

Возвращаясь к s> element: полотно – это прямоугольная область на странице HTML. По умолчанию холст не имеет рамок и содержимого.

Разметка выглядит так:

Начало

Ладно, столько для поступления. Давайте сосредоточимся на создании чего-то веселого, используя простой старый JavaScript (не такой старый — ES6!). Сначала мы рассмотрим исходные файлы.

Давайте разберем это. У нас есть таблица стилей под названием style.css. Затем мы переходим к определению a полотно элемент шириной 800 и высотой 800. Наконец, у нас есть a сценарий тег с названием app.js где совершается вся магия. На этой ноте давайте начнем что-то делать с нашим собственным app.js.

  • Мы начинаем с выбора элемента canvas в первой строке и сохраняем значение в переменной const под названием полотно для простоты.
  • Затем мы фиксируем контекст того же полотна в 2D-аспекте и устанавливаем для него значение переменная.
  • Установите ширину и высоту полотна в соответствии с внутренней шириной окна и высоты.

Теперь, когда у нас, наконец, есть наше полотно, мы переходим к определению основных атрибутов полотна.

  • ctx.strokeStyle устанавливает или возвращает цвет, градиент или узор, используемый для штрихов. Да, вы правильно прочли: цвет по умолчанию выглядит #BADASS.
  • ctx.lineWidth sets или возвращает текущую ширину линии. Мы установили его на 1, и мы придем к этому позже.
  • ctx.lineJoin sets или возвращает тип угла, созданного при встрече двух линий. Мы устанавливаем его округлым, чтобы при встрече двух линий у нас была аккуратная точка соединения.
  • ctx.lineCap устанавливает или возвращает стиль концевых заглушек линии. Мы устанавливаем его круглым, чтобы, когда мы не встречаем никакой другой линии, мы все равно получали ту же аккуратную фигуру трубы в зависимости от ширины штриха, определенной ранее.

Теперь, когда у нас есть все эти элементы, давайте посмотрим, как мы можем рисовать на холсте.

Во-первых, нам нужно добавить несколько слушателей событий для движения мыши на холсте, а затем запустить функцию, которая фактически рисовала бы что-то на холсте. Давайте посмотрим на дополнения, которые мы можем иметь в app.js.

Давайте разберем это:

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

Объявляя isDrawing переменная и установление ее свойства на ошибочный, мы устанавливаем начальное состояние полотна, как только элемент полотна загружается как ни рисунок. Затем в каждом следующем слушателе событий мы используем встроенная функция и изменить значение isDrawing функционировать каждый раз в соответствии с типом вызванного события.

В начале функции рисования, если значение isDrawing установлено значение false, функция отключается после встречи с инструкцией return. Если isDrawing установлено значение true, функция рисования будет выполнена.

Функция рисования

Рассмотрим эту функцию рисования:

  • Мы начинаем с глобального определения двух переменных, lastX, lastY, и установите исходное значение 0.
  • Если вы перейдете к консоли вашего браузера, вы увидите, что у вас есть огромный журнал всех движений мыши, которые вы делаете. Это MouseEvent объект имеет несколько очень важных и полезных свойств:
1*OUcCcMG5ljNwh1aJPqsHSA
Объект MouseEvent

Нас интересует только свойство offsetX и offsetY этого объекта.

  • С самим ctx.beginPath, мы начинаем путь или сбрасываем текущий путь. И то и другое мы хотим делать для каждого инициированного события.
  • ctx.moveTo перемещает путь к указанной точке на холсте, не создавая линии. В нашем случае это будут lastX и lastY, определенные вне функции в глобальной области видимости.
  • ctx.lineTo добавляет новую точку и создает линию в эту точку от последней указанной точки на холсте.
  • ctx.stroke() на самом деле рисует путь, который вы определили – настоящие трудолюбивые, ребята!

Внутри ctx.lineTo, мы использовали свойство события offsetX и offsetY чтобы получить последнюю точку X и Y на холсте, чтобы нарисовать линию ctx.lineTo.

У нас почти все на месте. Каждое событие мыши на веб-странице рисует линию на холсте – но с определенным трудом и небольшим махом. Давайте добавим немного хорошего настроения.

Swag!

Все линии начертаны от точек 0 и 0 на холсте. Мы устанавливаем это как начальный набор точек для начала рисования при загрузке полотна или даже при выполнении функции рисования.

Давайте поправим это, чтобы иметь лучший опыт в реальном времени. Если вы подумаете об этом, ответ очень прост: всякий раз, когда выполняется функция рисования, мы хотим, чтобы начальная точка всегда была offsetX и offsetY собственность в Объект MouseEvent.

Используя деструктуризацию массива ES6, мы можем сбросить значения lastX и lastY на свойства offsetX и offsetY объекта MouseEvent. Мы можем сделать это в конце функции рисования. Давайте посмотрим файл app.js после того, как добавим к нему некоторые символы.

  • Как только перемещение мыши происходит событие, мы запускаем функцию рисования. Затем мы устанавливаем значения lastX и lastY в функции рисования посредством деструктуризации ES6.
  • В случае а mousedown события, сначала мы изменяем встроенную функцию на block, как видите, а затем снова устанавливаем значения lastX и lastY как свойство смещения события. Это делается для того, чтобы убедиться, что мы видим линию на холсте, когда мы двигаемся от одной точки к другой точке на холсте.

Давайте сделаем его цветным и добавим немного динамики в обводку.

ПРАЗДНИКИ МОЛИ!!

Это очень много, но давайте разберем это.

  • Я определил новую переменную под названием оттенок и установить его свойство на 0.
  • Если вы еще не знаете о Hue и почему он отличный, попробуйте в Google или просто нажмите здесь.

В своей простейшей форме hsl позволяет нам использовать ту же радугу цветов в диапазоне от 0 до 360. Каждое число имеет значение фотографии и альфа. Определение hsl выглядит примерно так: hsl(173, 99%, 50%). Здесь число 173 представляет цвет – 99% – это светота, а 50% – значение альфа.

Опять же, используя некоторые отличные обратные отметки ES6, мы можем использовать hsl и воздействовать на него, делая что-то вроде этого:

ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`

как мы делали в строке 7 в приведенной выше сущности.

Далее мы увеличиваем значение оттенок переменная, которая изменяет цвет штриха с каждым перемещение мыши событие. Когда значение оттенка будет увеличено до 360, мы сбрасываем значение оттенка до 0 в строке 14 приведенной выше сущности. Но даже если мы этого не сделаем, мы все равно будем иметь тот же результат. Несмотря на это, давайте просто сделаем правильные вещи. 😀 лол

if(hue>360){
hue =0
}

Далее давайте добавим немного динамики к ширине штриха, который рисуется каждый раз, вот так:

if(ctx.lineWidth>=75 || ctx.lineWidth<=1){
direction = !directион;
}

if(direction){
ctx.lineWidth++
} else {
ctx.lineWidth = 0
}

Все, что мы сделали здесь, это сначала проверить, ток ли lineWidth больше 75 или менее 1. Если это так, мы изменяем значение переменной направление для которого установлено значение true по умолчанию.

Далее мы проверяем, значение переменной направление правда. Если да, то увеличьте значение lineWidth на 1, иначе сбросьте lineWidth быть 0.

Это был не слишком JavaScript. У вас уже должно быть готовое хорошее полотно, если вы правильно следили за ним.

Давайте быстро рассмотрим, как выглядит окончательная структура файла. Поскольку мы изменили только файл app.js, я покажу вам только его, поскольку index.html почти не изменился с самого начала.

Это только верхушка айсберга, когда думать об общей мощности элемента canvas в сочетании с JavaScript. Я бы призвал вас провести немного больше исследований и сделать холст еще лучше. Возможно, добавьте несколько кнопок для очистки экрана или, возможно, выберите определенный цвет для рисования на холсте. Так много вариантов!

Я только говорю, что есть миллионы способов сделать это лучше. Я обязательно обновлю историю, если у меня будет что-нибудь, что стоит обновить.

Наконец, я хотел бы оставить вам видео о том, как полотно будет смотреться в самом конце.

Надеюсь, вам понравилось все это прочесть! Будем очень благодарны за любые комментарии или предложения по улучшению или дальнейшему обсуждению. Вы также можете связаться со мной в Twitter и LinkedIn.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *