HTML5: новые возможности для старых функций

HTML5 подарил пользователям много новых инструментов, в числе которых настоящая находка для любителей проявлять свои творческие наклонности – Canvas. Наиболее говорящим, точным и понятным переводом будет «холст».

Что представляет собой Canvas: возможности и применение

Холст используется для начертания графиков, диаграмм, анимаций и т.д., с применением JavaScript. В особенности в тех случаях, когда необходимо избежать проблем с поддержкой CSS в некоторых браузерах. Холст позволяет использовать разнообразные эффекты, создавая любую форму объекта.

Способы применения элемента Canvas:

1. Простейшие фигуры.
2. Контур.
3. Текст.
4. Градиент.
5. Изображения.

Целесообразным будет рассмотреть первые три способа, как наиболее часто используемые.

Простейшие фигуры

У холста есть три атрибута:

• высота и ширина (по умолчанию 150 на 300), height и widht соответственно;
• id.

Сanvas является универсальным элементом, чьей областью с неизменяемыми параметрами управляют контексты.

Будучи пространством, позволяющим рисовать что угодно, холст сам по себе не виден без заданных параметров, допустим, рамки. Чтобы внутри этого поля нарисовать один только прямоугольник, можно воспользоваться рядом свойств.

Контур

Как и в нецифровом пространстве, то есть в нашей с вами реальности, с элементом Canvas возможно создать так называемый контур, который не является частью основной работы, пока вы не наведете нестираемой линией конечный вариант. Это можно сравнить с карандашным наброском и обведением подходящих линий пером.

Для этого существуют два метода:

• moveTo(х, у) обеспечивает перемещение карандаша к точке, обозначенной как начальная;
• lineTo(х, у) позволяет рисовать линию до конечной точки.

При помощи stroke() можно обвести «карандашный» набросок «пером». stroke() обводит всё, нарисованное при помощи moveTo(х, у) и lineTo(х, у), а strokeStyle отвечает за цвет линий.

Текст

Рисуя текст, вы можете выбрать определенную точку на canvas и несколько атрибутов:

• font включает всё, что вы указали в CSS-свойстве font;
• textAlign выравнивает текст по аналогии CSS;
• textBaseline определяет расположение текста относительно начальной точки.

Какой бы способ применения вы ни выбрали, при помощи элемента Canvas можно создать всё, ограничиваясь только своей фантазией. Данный элемент нашел своё широкое использование в самых разных случаях, удачно заменив CSS.