HTML5 за 10 минут

Представление о прикладном программном интерфейсе элемента управления Canvas


Консорциум W3C разработал прикладной программный интерфейс (API) для элемента управления Canvas, определив имена встроенных функций и порядок их применения.

С полным описанием текущей версии интерфейса API для элемента управления Canvas можно ознакомиться по адресу http://dev.w3.org/html5/canvas-api/canvas-2d-api.html. А ниже рассматриваются наиболее важные функции из этого интерфейса.

В описании интерфейса API, разработанного W3C для элемента управления Canvas, перечисляются атрибуты элемента, используемые в коде JavaScript, но не в коде HTML, как, например, canvas 1 .fillStyle = хххх, а также встроенные функции JavaScript. Поэтому сначала задается отдельное свойство элемента управления Canvas с помощью атрибутов, а затем выполняется соответствующая операция рисования. Так, в приведенном ниже фрагменте кода сначала задается стиль рисования с помощью атрибута fillStyle, а затем рисуется прямоугольник, заполняемый при обращении к функции fillRect.

canvasl.fillStyle -xxxx canvasl.fillRect(xy, xx, xx, xx;

Каждый элемент интерфейса API предваряется его типом, например float для операций с плавающей точкой. Ниже перечислены некоторые типы данных, чаще всего встречающиеся в спецификациях W3C.

•    any — для атрибутов. Это означает, что атрибут может иметь любой тип.

•    DOMString — для текста в кавычках, где DOM означает Document Object Model — объектная модель документов.

•    float — для числовых значений и операций с плавающей точкой.

А теперь рассмотрим атрибуты и функции, доступные в интерфейсе API для элемента управления Canvas.

Стилевое оформление

Для установки стиля рисования в элементе управления Canvas, будь то с заполнением фигур или без такового, служат два атрибута.

•    Атрибут заполнения:

attribute any fillStyle; //по умолчанию черный цвет

•    Атрибут обводки:

attribute any strokeStyle; //по умолчанию черный цвет

Установка стилей рисования линий

Стили рисования линий, применяемые в элементе управления Canvas, устанавливаются с помощью следующих атрибутов JavaScript.

•    attribute DOMString lineCap; // "butt" ("встык"), "round" ("скругление"), "square" ("под прямым углом") (по умолчанию устанавливается значение "butt")

•    attribute DOMString lineJoin; // "miter" ("скос под углом 45 "), "round" ("скругление"), "bevel" ("скашивание")(по умолчанию устанавливается значение "miter")

•    attribute float lineWidth; // (по умолчанию устанавливается толщина линии 1)

•    attribute float miterLimit; // (по умолчанию устанавливается предельный скос 10)

Комментарии закрыты