Элемент холста можно использовать для многих вещей, таких как создание игр, добавление анимации на ваш сайт или даже добавление визуализации данных. Я наткнулся на холст, когда создавал игру с дополненной реальностью для проекта Hackathon. Благодаря холсту моя игра стала интерактивной и увлекательной! Вы можете увидеть мой проект здесь.
Начало работы с холстом HTML
Холст - это HTML-тег, который предоставляет «рисованную» область с атрибутами высоты и ширины. Мы можем управлять холстом с помощью кода JavaScript с помощью набора функций рисования, динамически изменяя сгенерированную графику. Поскольку холст является тегом HTML, он является частью DOM, следовательно, он может взаимодействовать с DOM и подвергаться влиянию этого (в отличие, например, от Flash, который широко использовался в прошлом).
В этом уроке мы подробно рассмотрим возможности холста.
Настройка
Чтобы запустить холст, все, что нам нужно сделать, это добавить тег холста в наш html-код:
//html <canvas id="canvas"></canvas> <canvas id="canvas" width="450" height="250"></canvas>
Мы можем контролировать размер нашего холста с помощью атрибутов width и height. Если эти атрибуты предоставлены, они должны быть действительными и неотрицательными числами. Если не указан, для атрибута ширины по умолчанию будет установлено значение 300 пикселей, а для высоты - 150 пикселей.
Примечание. Если размер css расширяет пропорции исходного холста, это может привести к искажению графики. Чтобы избежать этой проблемы, вы можете попробовать указать атрибуты width и height непосредственно в теге ‹canvas›, а не в CSS.
//css
#canvas {
width: 450px;
height: 250px;
background-color: #4286f4;
}
Чтобы начать рисовать на холсте, мы должны сначала его инициализировать и создать контекст холста с помощью JavaScript. Мы можем написать JS в теге скрипта внутри HTML-кода или, желательно, в отдельном JS-файле.
Мы будем использовать функцию getContext для создания контекста холста - объекта javascript со свойствами и методами, которые позволяют нам отображать графику внутри нашего элемента холста. Контекст может быть 2d или webgl (3d).
const canvasInput = document.getElementById('canvas')
const cc = canvasInput.getContext('2d')
После того, как вся эта настройка будет завершена, мы, наконец, сможем немного повеселиться!
Есть много функций, которые мы можем использовать для создания фигур, линий, текста и анимации. Мы рассмотрим некоторые из основных функций и рассмотрим несколько примеров ниже.
Понимание сетки
Наш холст состоит из пикселей. Чаще всего одна единица на нашем холсте равна 1 пикселю. Это можно изменить с помощью функции scale ().
Начальной точкой нашего холста является верхний левый угол с координатами (0,0). Ось x представляет ширину холста. Ось y представляет высоту (хотя, как ни странно, y растет к нижней части экрана).
Вышесказанное важно понимать, так как оно определит, где мы хотим, чтобы наша графика отображалась.
Чтобы нарисовать что-либо на нашем холсте, нам потребуется выполнить ряд функций.
Нарисуйте линии
Чтобы начать рисовать линию, нам сначала нужно определить нашу отправную точку. Где мы хотим, чтобы наша линия начиналась на холсте? Затем мы устанавливаем эту начальную точку с помощью функции moveTo () и передаем ей координаты нашей начальной точки.
Следующим шагом будет определение следующей остановки на этой строке с помощью функции lineTo (), которая также принимает координаты.
Если мы хотим создать фигуры, мы можем вызывать функцию lineTo () столько раз, сколько нам нужно, каждый раз передавая следующий набор координат.
После того, как мы установили все наши координаты для нашей линии, пора вызвать функцию stroke (), которая будет рисовать линию на холсте.
В приведенном ниже примере мы рисуем треугольник из простых линий. Вы могли заметить функцию closePath (), не волнуйтесь, мы подробнее рассмотрим пути позже в этом руководстве.
//This example will create a drawing of a triangle cc.moveTo(20,30) cc.lineTo(100,100) cc.lineTo(160,30) cc.closePath() cc.stroke()
Рисование прямоугольников
Хотя мы можем рисовать прямоугольники простыми линиями, как треугольник в приведенном выше примере, есть функция для создания прямоугольников. ‹Canvas› поддерживает только прямоугольную форму, поэтому нам нужно комбинировать функции линии и пути для других фигур.
Есть 3 различных функции прямоугольника. Все принимают одинаковые параметры - координаты левого верхнего угла, ширину и высоту прямоугольника.
cc.strokeRect(30, 10, 70, 46) //Draws a rectangle outline cc.fillRect(75, 30, 70, 46) //Draws a filled rectangle cc.clearRect(120, 50, 70, 46) //Will clear the provided rectangle and make it transparent
Рисование кругов
Для рисования кругов мы будем использовать функцию arc (). Эта функция ведет себя немного иначе, чем функции, которые мы видели до сих пор. Дуга - это, по сути, подмножество окружности. Нам не нужно рисовать весь круг с помощью этой функции, например, мы также можем нарисовать половину или четверть круга.
Первые два аргумента, которые принимает эта функция, - координаты x и y центра окружности. Следующий аргумент, который мы передадим, - это радиус круга. Затем мы передадим начальный и конечный угол круга (это также позволяет нам рисовать полукруги, в зависимости от ввода).
Последний аргумент является логическим и не является обязательным, он определяет, будет ли дуга нарисована против часовой стрелки. По умолчанию - по часовой стрелке.
cc.arc(75, 75, 50, 0, 2 * Math.PI,false) cc.stroke()
Давайте рассмотрим еще несколько основных функций, которые могут помочь нам с указанной выше проблемой, а также некоторые другие варианты использования.
Пути
Теперь мы знаем, как рисовать фигуры на нашем холсте, но мы можем увидеть нежелательное поведение, если попытаемся нарисовать более одной фигуры:
//draw a circle cc.arc(75, 75, 50, 0, 2 * Math.PI,false) //draw semi-circle cc.arc(200, 50, 50, 0, Math.PI, false) cc.closePath() cc.stroke()
Ой ой! Что там произошло? Наш холст не знает, когда нужно прекратить рисование, он недостаточно умен, чтобы знать, что мы хотим, чтобы эти фигуры располагались рядом, не касаясь друг друга. Функция stroke () продолжает рисовать от точки к точке, в результате чего получается рисование одной линии.
Функция beginPath () начнет новый путь. Новый путь позволит холсту узнать, что следующие инструкции отделены от ранее выполненных.
cc.arc(75, 75, 50, 0, 2 * Math.PI,false) cc.stroke() cc.beginPath() cc.arc(200, 50, 50, 0, Math.PI, false) cc.closePath() cc.stroke()
Примечание. Почему нам нужно вызывать функцию stroke () для обеих фигур? Потому что stroke () будет рисовать только последний закрытый путь. Если мы хотим нарисовать несколько путей, вы должны вызывать обводку для каждого пути отдельно.
closePath () - мы уже сталкивались с этой функцией для рисования полукругов и прямоугольников из линий. Хотя мы могли бы заменить функцию closePath () на обычную lineTo () (и передать ей координаты начала нашей фигуры), closePath ( ) не принимает никаких параметров и представляет собой простую и удобочитаемую замену.
strokeStyle и fillStyle - эти функции можно использовать, когда вы хотите установить стиль контура и / или заливку фигуры.
Чтобы применить новый стиль обводки / заливки, нам нужно использовать соответствующие функции рисования или заливки. Если это прямоугольник, мы можем заполнить его функцией fillRect ().
Примечание. При использовании этих функций они устанавливают новую настройку как новую настройку по умолчанию. Если мы хотим иметь разный цвет для каждой фигуры, мы должны настроить его перед отрисовкой каждой фигуры.
cc.fillStyle = 'yellow' cc.strokeStyle = 'red' cc.arc(200, 50, 50, 0, Math.PI, false) cc.closePath() cc.fill() cc.stroke() cc.beginPath() cc.fillStyle = 'red' cc.strokeStyle = 'yellow' cc.moveTo(20,30); cc.lineTo(100,100); cc.lineTo(160,30); cc.closePath() cc.fill() cc.stroke();
Использовать изображения
Теперь мы знаем, как рисовать фигуры и раскрашивать их, теперь давайте узнаем, как использовать изображения на нашем холсте.
Чтобы использовать изображение, мы сначала должны создать объект изображения.
const cat = new Image() cat.src ="https://upload.wikimedia.org/wikipedia/commons/e/e0/Cat_demonstrating_static_cling_with_styrofoam_peanuts.jpg"
Теперь мы можем передать наше изображение в качестве параметра функции drawImage ().
Функция drawImage () принимает в качестве аргумента не только изображение. Здесь все может немного запутаться, но у нас будут наглядные примеры для всех случаев.
Первый пример - самый простой. Мы вызываем функцию drawImage () с нашим изображением и координатами x и y того места, где мы хотим начать отображение изображения на холсте.
cc.drawImage(cat,25,25)
В нашем следующем примере мы передадим два дополнительных параметра, ширину и высоту для рисования на холсте. Эти новые параметры позволяют масштабировать изображение на нашем холсте.
cc.drawImage(cat, 25, 25, 250, 200) //drawImage(image, xOnCanvas, yOnCanvas, widthOnCanvas, heightOnCanvas)
А теперь самое запутанное. Мы можем использовать функцию drawImage (), чтобы нарисовать обрезанное изображение на холсте. Для этого мы включим не только координаты, высоту и ширину холста, на котором будет нарисовано наше изображение, но также координаты и размер (ширина и высота) самого изображения. Мы также начнем с передачи сначала координат и размера изображения, просто для удовольствия.
cc.drawImage(cat, 0, 50, 100, 100, 25, 25, 250, 200) //drawImage(image,imageX, imageY, imageWidth, imageHeight, xOnCanvas, yOnCanvas, widthOnCanvas, heightOnCanvas)
Во всех примерах изображений я использовал одни и те же координаты для холста и области, которая будет содержать изображение, чтобы сделать его менее запутанным.
Написание на нашем холсте
Разве не было бы забавно добавить текст на холст? Мы можем не только добавлять текст, но и стилизовать его!
Мы можем передать нашему свойству font тот же синтаксис, что и в css. Если мы не укажем стиль шрифта, наш текст получит стиль текста по умолчанию: 10px без засечек.
Мы можем придать цвет нашему тексту, используя функцию fillStyle (), которую мы видели ранее (помните, что она устанавливает цвет по умолчанию в целом, и если мы хотим изменить цвет для других элементов, которые нам нужны чтобы сбросить его).
После того, как мы указали стиль, мы можем использовать функцию fillText (), чтобы добавить текст на наш холст. Первый аргумент, который принимает функция fillText (), - это текст, который мы хотим добавить. Затем мы передаем ему координаты x и y холста, с которого мы хотим начать рисовать наш текст.
cc.font = '40pt Calibri'
cc.fillStyle = "blue"
cc.fillText('Hello World!', 35, 300);
Теперь мы знаем основы элемента холста. Это действительно универсальный инструмент, который можно использовать по-разному и для разных нужд.
Работая над этим руководством, я обратился к двум основным ресурсам:
