HTML5 за 10 минут

Рисование текста


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

•    attribute DOMString font; // (по умолчанию выбирается шрифт без засечек размером 10 пикселей)

•    attribute DOMString textAlign; // "start" ("сначала"), "end" ("с конца"), "left" ("по левому краю"), "right" ("по правому краю"), "center"("по центру") (по умолчанию устанавливается значение "start" для выравнивания текста)

•    attribute DOMString textBaseline; // "top" ("сверху"), "hanging" ("в висячем положении"), "middle" ("посредине"), "alphabetic" ("по алфавиту), "ideographic" ("по идеограмме"), "bottom("снизу") ("по центру") (по умолчанию устанавливается значение "alphabetic" для базовой линии текста)

•    fillText(DOMString text, float x, float y, optional float maxWidth); // заполнить текст

•    TextMetrics measureText(DOMString text); // задать типографские параметры шрифтового оформления текста

•    strokeText(DOMString text, float x, float y, optional float maxWidth); // обвести текст

Рисование изображений

Изображения можно нарисовать с помощью следующих функций.

•    drawlmage(HTMLImageElement image, float dx, float dy, optional float dw, float dh);

•    drawImage(HTMLImageElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh);

•    drawImage(HTMLCanvasElement image, float dx, float dy, optional float dw, float dh);

•    drawImage(HTMLCanvasElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh);

•    drawlmage(HTMLVideoElement image, float dx, float dy, optional float dw, float dh);

•    drawlmage(HTMLVideoElement image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh);

Выполнение преобразований

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

•    rotate(float angle); // повернуть на заданный угол

•    scale(float х, float у); // масштабировать

•    translate(float х, float у); // переместить

На этом краткий обзор интерфейса API для элемента управления Canvas завершается. А теперь применим его на практике, начиная с примера, рассматриваемого в следующем задании.

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