Начало работы с API Canvas

Начало работы с API Canvas

Итак, давайте узнаем что же такое API. API расшифровывается как Программный Интерфейс Приложения (Application Programmer Interface), и сейчас мы узнаем о некоторых основах того, что такое API. Когда вы заходите на веб-сайт (например, Canvas), вы получаете доступ к приложению. Приложение имеет веб-интерфейс, который написан для людей, чтобы интерпретировать информацию и взаимодействовать с этой информацией. Эти взаимодействия могут включать добавление данных, таких как сообщения для обсуждения, страницы и элементы модуля, или изменение данных, таких как обновление информации о студентах или сотрудниках или зачисление на курсы. Этот список не является обширным, и есть много других доступных функций. Однако это лишь некоторые примеры, на которые я буду ссылаться, чтобы подчеркнуть различия между веб-интерфейсом Canvas и API.

Ключевое различие между веб-интерфейсом Canvas и API заключается в том, что веб-интерфейс Canvas предназначен для того, чтобы человек мог интерпретировать и взаимодействовать с приложением. Он делает информацию визуально привлекательным, используя такие вещи, как иконография и визуально логические структуры для пользователей. API отличаются тем, что он предназначен для использования компьютером. Вы можете думать об API как о “просто другом веб-сайте”, но веб-сайте, к которому компьютеры могут получить доступ для взаимодействия с Canvas и содержащейся в нем информацией.

API Canvas предоставляет разработчикам возможность создавать графику “на лету” непосредственно из веб-браузера. Это имеет ряд преимуществ. Во-первых, это может помочь уменьшить количество HTTP-запросов, необходимых для загрузки графических ресурсов для вашего сайта, свою очередь, помогая уменьшить время загрузки страницы. Использование Canvas также позволяет создавать настраиваемую графику на клиенте. Это действительно полезно для таких приложений, как создание диаграмм или графиков для представления данных. Раньше эта работа выполнялась бы на стороне сервера, который потребляет ценные серверные ресурсы.

Сейчас мы рассмотрим основы того, как начать использовать Canvas API в ваших собственных веб-приложениях.

Элемент <canvas>

Первый шаг к использованию API Canvas – это знакомство с элементом <canvas>. Этот элемент используется для установки холста на вашей веб-странице. Затем вы будете рисовать на холсте с помощью JavaScript API. Вы должны относиться к этому элементу так же, как и к любому другому HTML-элементу, и его можно позиционировать и стилизовать с помощью CSS.

Ваш элемент <canvas> должен иметь атрибут id и может дополнительно иметь атрибуты width и height, хотя они могут быть заданы в CSS. Вы будете использовать этот идентификатор для выбора холста при использовании JavaScript API.

<canvas id=”myCanvas” width=”400″ height=”200″>

Your web browser does not support canvas!

</canvas>

В вышеуказанном примере можно увидеть элемент <canvas>. Метка, которую вы размещаете между тегами элементов, будет отображаться, если веб-браузер пользователя не поддерживает canvas.

Настройка Canvas

Для рисования на Canvas вы будете использовать JavaScript API. Первое, что вам нужно сделать, это получить ссылку на элемент <canvas> в вашей HTML-разметке. Это лучше всего достигается с помощью функции getElementById ().

var canvas = document.getElementById(‘myCanvas’);

Вы можете проверить, поддерживает ли пользовательский веб-браузер API Canvas, проверив наличие функции getContext() в примере Сanvas.

if (canvas.getContext) { }

Чтобы начать рисовать на Canvas, вам нужно будет инициализировать нечто, называемое контекстом 2d-рисования. Это похоже на карандаш, который вы можете использовать для рисования в альбоме. Чтобы инициализировать контекст 2d – чертежа, вы вызываете функцию getContext(“2d”) в своем экземпляре Canvas.

var ctx = canvas.getContext(‘2d’);

Заключение

Canvas API действительно интересен, и есть много удивительных разработчиков, которые используют его для создания замечательных вещей, таких как HTML5-игры. Однако Canvas API можно использовать не только для создания игр, но и для создания диаграмм и графиков, манипулирования изображениями или для создания настраиваемой рекламы на лету.


.

  • November 3, 2020