Заинтересованы в CSS анимации? Ознакомьтесь с разделом Создание анимации с помощью CSS , полный курс по CSS-переходам и анимации ключевых кадров от опытного веб-разработчика Донована Хатчинсона, доступный для членов SitePoint. Для примера анимации холста HTML5 смотрите Иллюстрации с HTML5 Canvas ниже, это одно видео из нашего мини-курса « Начните анимацию с помощью HTML5 Canvas» .
Press shift question mark to access a list of keyboard shortcuts
Одним из наиболее важных инструментов в наборе инструментов художника является их холст. Это дает им свободу выражать любые чувства, впечатления, идеи и т. Д. В практически неограниченных вариациях и сочетаниях. И эта свобода может быть ограничена только двумя вещами — их уровнем мастерства и их воображением.
Ситуация в мире веб-разработки похожа. Благодаря постоянному прогрессу HTML5 и его мощным спецификациям, веб-разработчики получили возможность делать вещи, которые были невозможны в прошлом. Рисование графики и создание анимации прямо в браузере теперь полностью возможно благодаря технологии под названием HTML5 Canvas .
Что такое HTML5 Canvas?
Элемент canvas — это элемент, определенный в HTML-коде с использованием атрибутов widthheight Однако настоящая сила элемента canvas достигается за счет использования HTML5 Canvas API. Этот API используется для написания JavaScript, который может получить доступ к области холста через полный набор функций рисования, что позволяет динамически генерировать графику.
Что такого замечательного в HTML5 Canvas?
Вот несколько причин, по которым вы можете захотеть научиться использовать функцию Canvas в HTML5:
- Интерактивность. Холст полностью интерактивный. Он может реагировать на действия пользователя, прослушивая события клавиатуры, мыши или касания. Таким образом, разработчик не ограничен только статической графикой и изображениями.
- Анимация. Каждый нарисованный на холсте объект может быть анимирован. Это позволяет создавать все уровни анимации, от простых прыгающих шаров до сложной прямой и обратной кинематики .
- Гибкость. Разработчики могут создавать практически все, используя canvas. Он может отображать линии, фигуры, текст, изображения и т. Д. — с анимацией или без нее. Кроме того, добавление видео и / или аудио в приложение Canvas также возможно.
- Поддержка браузера / платформы. HTML5 Canvas поддерживается всеми основными браузерами и доступен на многих устройствах, включая настольные ПК, планшеты и смартфоны.
- Популярность. Популярность холста быстро и неуклонно растет, поэтому нет недостатка в доступных ресурсах.
- Это веб-стандарт. В отличие от Flash и Silverlight, Canvas — это открытая технология, являющаяся частью HTML5. И хотя не все его функции реализованы во всех браузерах, разработчики могут быть уверены, что canvas будет существовать бесконечно долго.
- Развивайся один раз, беги везде. HTML5 Canvas предлагает отличную переносимость. После создания, в отличие от Flash и Silverlight, приложение Canvas может работать практически где угодно — от самых больших компьютеров до самых маленьких мобильных устройств.
- Бесплатные и доступные инструменты разработки. Основные инструменты для создания приложений HTML5 canvas — это просто браузер и хороший редактор кода. Плюс, есть много отличных и бесплатных библиотек и инструментов, которые помогут разработчикам в продвинутой разработке холста.
Какие приложения вы можете создать с помощью HTML5 Canvas?
ОК, холст отличный. Но для чего именно это можно использовать? Посмотрим.
- Gaming. Набор функций HTML5 Canvas является идеальным кандидатом для создания всевозможных 2D и 3D игр.
- Реклама. HTML5 Canvas — отличная замена для баннеров и рекламы на основе Flash. В нем есть все необходимые функции для привлечения внимания покупателей.
- Представление данных. HTML5 может собирать данные из глобальных источников данных и использовать их для создания визуально привлекательных и интерактивных графиков и диаграмм с элементом canvas.
- Образование и Обучение. HTML5 canvas можно использовать для эффективного и привлекательного обучения, комбинируя текст, изображения, видео и аудио.
- Искусство и Украшение. С небольшим воображением и широким разнообразием цветов, градиентов, узоров, прозрачности, теней и функций отсечения можно рисовать все виды художественной и декоративной графики.
Теперь, когда мы знаем, почему мы должны изучать canvas, давайте посмотрим на основы HTML5 Canvas и как начать его использовать.
Контексты рендеринга холста
Каждый элемент холста HTML5 должен иметь контекст . Контекст определяет, какой HTML5 Canvas API вы будете использовать. 2D-контекст используется для рисования 2D-графики и управления растровыми изображениями. 3D-контекст используется для создания и манипулирования 3D-графикой. Последний фактически называется WebGL и основан на OpenGL ES .
Начиная
Для начала работы с canvas все, что вам нужно — это редактор кода и браузер с поддержкой HTML5 canvas. Я использую Sublime Text и Google Chrome, но вы можете использовать все, что захотите.
Наш HTML для начала будет выглядеть так:
<canvas id="exampleCanvas" width="500" height="300">
<!-- OPTION 1: leave a message here if browser doesn't support canvas -->
<p>Your browser doesn’t currently support HTML5 Canvas.
Please check caniuse.com/#feat=canvas for information on
browser support for canvas.</p>
<!-- OPTION 2: put fallback content (text, image, Flash, etc.)
if the browser doesn't support canvas -->
</canvas>
И вот наш JavaScript, который мы можем включить в нижней части нашей HTML-страницы:
var canvas = document.getElementById('exampleCanvas'),
context = canvas.getContext('2d');
// code examples will continue here...
По умолчанию браузер создает элементы canvas шириной 300 пикселей и высотой 150 пикселей, даже если они не указаны в HTML. Вы можете изменить размер, указав widthheight
Также обратите внимание, что мы дали холсту атрибут id И, наконец, если вы хотите, вы можете использовать CSS, чтобы добавить рамку, чтобы сделать холст видимым с помощью тонкой рамки. Это не обязательно, оно используется в качестве наглядного пособия для нас, чтобы увидеть границу элемента canvas.
Обратите внимание, что между открывающим и закрывающим тегами <canvas> Это может быть почти любой тип контента, который поддерживает старый браузер.
JavaScript начинается с двух строк. В первой строке мы создаем переменную, которая кэширует наш элемент canvas через его идентификатор. Вторая строка создает переменную ( contextgetContext() Мы будем использовать переменную context
С готовым холстом мы можем начать экспериментировать с Canvas API. Но перед этим давайте проясним еще несколько аспектов функции canvas.
HTML5 Размер элемента холста и размер поверхности рисования
Помимо атрибутов widthheight Однако определение размера элемента canvas с помощью CSS — это не то же самое, что установка атрибутов widthheight Это потому, что холст на самом деле имеет два размера: размер самого элемента и размер поверхности рисования элемента.
Когда вы устанавливаете атрибуты widthheight однако, когда вы используете CSS для определения размера элемента canvas, вы устанавливаете только размер элемента, а не поверхность рисования. Когда размер элемента canvas не соответствует размеру его поверхности рисования, браузер масштабирует поверхность рисования, чтобы соответствовать элементу.
По этой причине рекомендуется использовать атрибуты widthheight
Понимание системы координат холста
В двумерном пространстве позиции указываются с использованием координат X и Y. Ось X простирается горизонтально, а ось Y простирается вертикально. Центр имеет положение x = 0y = 0(0, 0) Этот метод позиционирования объектов, используемый в математике, известен как декартова система координат .
Однако система координат Canvas размещает начало координат в верхнем левом углу холста, причем координаты X увеличиваются вправо, а координаты Y увеличиваются внизу холста. Таким образом, в отличие от стандартного декартова координатного пространства, пространство Canvas не имеет видимых отрицательных точек. Использование отрицательных координат не приведет к сбою приложения, но объекты, расположенные с использованием отрицательных координат, не появятся на странице.
Основные Примеры Холста
Как уже упоминалось, HTML5 Canvas позволяет создавать различные типы объектов, в том числе линии, кривые, контуры, фигуры, текст и т. Д. В следующих примерах вы можете увидеть, как на самом деле нарисованы некоторые из этих объектов. Я не буду вдаваться в подробности о Canvas API; это всего лишь некоторые из них, которые помогут вам понять, как работает canvas.
Рисование линий
Чтобы нарисовать линию, мы используем четыре метода API Canvas. Мы начнем с beginPath() Далее мы используем метод moveTo(x, y) Затем lineTo(x, y)
На этом этапе линия будет проведена, но она все еще невидима. Чтобы сделать его видимым, мы используем метод stroke()
context.beginPath();
context.moveTo(50, 50);
context.lineTo(250, 150);
context.stroke();
Рисовать прямоугольник
Чтобы нарисовать прямоугольник, мы можем использовать метод fillRect(x, y, width, height)fillStyle
context.fillStyle = 'yellow';
context.fillRect(50, 50, 200, 100);
Обратите внимание, что прямоугольник расположен рядом с верхним левым углом.
Рисовать текст
Чтобы нарисовать текст на холсте, мы можем использовать fillText(string, x, y)font
context.font = 'italic 40pt Calibri, sans-serif';
context.fillText('Hello World!', 50, 50);
Вы должны знать, что хотя простое рисование с помощью HTML5 Canvas API легко, создание сложных форм и анимаций требует определенных знаний по математике и физике. Одной из лучших книг на эту тему является Foundation HTML5 Animation с JavaScript . Эта книга — отличный ресурс для обучения движению вещей, от простых анимаций до сложных.
Где узнать больше?
Если вы хотите узнать, вот несколько ресурсов:
- Canvas tutorial — отличный учебник по MDN, полный примеров, иллюстраций и подробных объяснений.
- HTML5 Canvas Element Guide — Учебник для начинающих от Six Revisions.
- HTML5 Canvas tutorials — полный набор учебников, созданных Эриком Роуэллом, создателем библиотеки холстов KineticJS. Все примеры являются интерактивными; Вы можете играть с ними и сразу увидеть результат.
Ускорьте разработку холста
Работа с «сырым» HTML5 Canvas API может быть утомительной работой. Вот почему, если вы научитесь хорошо, переходите на хорошую библиотеку Canvas, которая может ускорить и упростить разработку холста.
Вот несколько популярных вариантов:
Другой способ ускорить разработку HTML5 Canvas — использовать плагин Ai-> Canvas для Adobe Illustrator . Вы можете найти обзор плагина в этой статье на SitePoint .
Вывод
Вот и все. Я надеюсь, что это вводное руководство по HTML5 Canvas дало вам хорошую отправную точку для продолжения изучения и изучения этой мощной технологии.