Что это?
Canvas — это элемент HTML5, который позволяет рисовать фигуры, линии и точки и манипулировать ими с помощью анимации.
Давайте использовать это
Вы начнете с создания html-файла и добавления элемента «холст». Мы также можем добавить быстрые стили границ на холст, чтобы мы могли видеть его размер.
Здесь вы можете увидеть, где наш холст.
Теперь мы можем создать наш файл canvas.js. На изображении выше ширина и высота холста показаны равными 500, но мы хотим, чтобы холст заполнил весь браузер. Для этого мы можем установить ширину холста на window.innerWidth и высоту на window.innerHeight. Это сделает холст размером с размер вашего браузера.
Чтобы иметь доступ к функциям холста, нам нужно создать экземпляр контекста рендеринга холста. Вы можете видеть ниже, что мы создаем новый экземпляр с именем c. Мы можем вызывать методы этого экземпляра для взаимодействия с элементом холста. Вы можете перейти на https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D, чтобы увидеть список методов, с которыми вы можете поиграть.
Формы
Давайте сделаем несколько фигур!
Начнем с создания квадрата. Мы можем использовать fillRect для заполнения квадрата. fillRect принимает координаты x и y, которые определяют, где на холсте будет находиться квадрат. Верхний левый угол холста будет иметь координаты 0,0. Он также принимает ширину и высоту, которые будут размером вашего квадрата. Мы также можем выбрать цвет для нашего квадрата и использовать fillStyle, чтобы заполнить его. Если вы не укажете цвет, он будет черным.
Давайте сделаем еще несколько квадратов и изменим их цвет. Вы можете сбрасывать цвет каждый раз, когда создаете новый квадрат.
Линии
Мы можем рисовать линии на нашей странице холста! Чтобы начать новую строку, вы будете использовать beginPath(), и если вы хотите начать свою строку в любом месте, отличном от 0,0, вы можете указать своей строке перейти к (50,300) или туда, где вы хотите начать. «Перо» переместится в это место на холсте, и тогда вы сможете начать рисовать линию. Вы увидите, что я хочу, чтобы моя линия переместилась с (50 300) на (300 100), и как только вы вызовете c.stroke(), она нарисует линию.
Круги
Мы можем делать круги или полукруги, используя функцию дуги. Он принимает несколько аргументов: координаты x и y, радиус, начальный и конечный углы, а также необязательный аргумент, указывающий, в каком направлении будет начинаться линия. Мой круг будет в (300 300) с радиусом 30, начальным углом 0 и конечным углом пи * 2, а false означает, что он начнет линию по часовой стрелке или против часовой стрелки
c.arc(x, y, radius, startAngle, endAngle, [anticlockwise]);
Мы хотим сделать много кругов, но мы не хотим копировать и вставлять код снова и снова. Таким образом, мы можем создать цикл for, который сделает всю работу за нас. Сделаем 10 кругов со случайными координатами x и y.
Анимации
Мы также можем создавать анимацию на холсте HMTL, так что давайте заставим наши круги подпрыгивать. Мы можем заставить их перемещаться по нашему холсту, и для этого нам нужно использовать функцию requestAnimationFrame(). Это сообщит браузеру, что вы хотите выполнить анимацию, и запросит, чтобы браузер вызвал определенную функцию. обновить анимацию перед следующей перерисовкой.
Таким образом, этот метод будет похож на то, как мы создали круг сверху.
Давайте подарим этому одинокому кругу друзей! Мы можем создать объект круга, и мы в основном вставляем предыдущий код, который мы написали, и помещаем его внутрь объекта, теперь мы можем создать множество кругов с разными координатами и скоростями.
Здесь у нас есть наша функция анимации, которая очищает страницу, прежде чем мы снова нарисуем наши круги, и мы также вызываем функцию .update() из нашего класса объектов для каждого круга, который мы создали из нашего цикла for выше. Теперь у нас будет 100 кругов со всеми разными координатами x и y, а также скоростями.
Теперь, когда вы знаете основы работы с холстом, вы можете экспериментировать и создавать множество разных вещей, а также анимировать их.
Я следовал этому руководству и думал, что это действительно здорово. Объяснения по всему имели большой смысл, и я призываю вас следовать им!
