HTML5 за 10 минут

Рисование с помощью элемента управления Canvas


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

<canvas height-"ууу" width=xxx">

</canvas>

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

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

Общее представление об элементе управления Canvas

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

Элемент: <canvas>

Начальный дескриптор: требуется

Конечный дескриптор: требуется

Требующиеся атрибуты: height и width

Поддерживающие браузеры: Chrome, Firefox, Opera, Safari

Основные действия, касающиеся этого элемента управления, происходят в коде JavaScript. Именно здесь предоставляется возможность рисовать на виртуальном полотне элемента управления Canvas, как будет продемонстрировано в примере, рассматриваемом ниже, а результат показан на 2.1.

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

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