Урок - Текст. Комбинирование изображений.

Главная » Курсы » Курс HTML5 Canvas » Урок - Текст. Комбинирование изображений.

Обучающий онлайн курс
HTML5 Canvas

Лицензия: Копирование запрещено.

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

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

Следующие атрибуты шрифта доступны в контексте рисования.

  • font может содержать все, что вы бы добавили в свойство CSS font.

    Включает стиль шрифта, насыщенность, размер, межстрочное расстояние и семейство гарнитур.

  • textAlign управляет выравниванием текста. Похоже на свойство CSS text-align, но не идентично ему. Возможные значения: start, end, left, right и center.
  • textBaseline говорит, где рисуется текст относительно начальной точки. Возможные значения: top, hanging, middle, alphabetic, ideographic и bottom.

    Атрибут textBaseline хитрый, потому что сам текст такой (к тексту на английском это не относится, но вы ведь можете нарисовать любой символ Юникода). Спецификация HTML5 объясняет различия между базовыми линиями.

    Верх площадки em (top) это примерно верх глифов в шрифте;

    выносная базовая линия (hanging) там, где привязаны некоторые глифы вроде ?;

    середина (middle) это половина между верхом и низом площадки em;

    алфавитная базовая линия (alphabetic) проходит там, где привязаны символы вроде Б, я, f и ?;

    идеографическая базовая линия (ideographic) располагается там, где привязаны символы вроде ? и ?;

    низ площадки em это примерно низ глифов в шрифте.

    Вер и низ ограничивающего прямоугольника может быть далеко от базовой линии из-за того, что глифы выходят далеко за предел прямоугольника em. текст Для простых алфавитов вроде английского вы можете без опасений придерживаться значений top, middle или bottomу свойства textBaseline.

Существуют два метода для вывода текста: fillText и strokeText.

Первый отрисовывает текст, заполняя его заливкой стиля fillStyle, другой рисует обводку текста, используя стиль strokeStyle. Оба метода принимают три аргумента: собственно текст и координаты (x,y), в которых его необходимо вывести. Также существует четвертый необязательный аргумент — максимальная ширина. Этот аргумент необходим для умещения текста в заданную ширину.

Свойства выравнивания текста влияют на позиционирование текста относительно координат его вывода (x,y).

Следующий код приведет к выводу на Canvas слов "hello world".

context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText ('Hello world!', 0, 0);
context.font = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50);

Так этот пример будет выглядеть в браузере:

пример

Могу ли я использовать относительные размеры шрифтов для рисования текста на холсте? Да. Как и любой другой HTML-элемент на странице, <canvas> сам вычислит размер шрифта на основе правил CSS. Если вы установите свойство context.font на относительный размер шрифта, такой как 1.5em или 150%, ваш браузер умножит его на вычисленный размер шрифта самого элемента <canvas>.

Комбинирование изображений.

Идея в том, что когда вы рисуете на canvas некоторое изображение, возникает вопрос как оно должно взаимодействовать с тем изображением, что уже есть. У объекта canvas есть специальное свойство: globalCompositeOperation. Ему можно присваивать набор предопределенных значений.

Таблица-справочник возможных значений переменной globalCompositeOperation с примерами.

source-over (default)

Это режим по-умолчанию когда рисуется новая картинка поверх старой.

1

destination-over

Новое изображение рисуется под старым

2

source-in

Новое изображение рисуется только в тех местах, где старое и новое изображение пересекаются. Все остальное становится прозрачным.

3

destination-in

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

4

source-out

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

5

destination-out

Старое изображение сохраняется в тех местах, где оно не пересекается с новым изображением.

6

source-atop

Новое изображение рисуется только в тех местах где оно пересекается с уже существующим изображением на canvas.

7

destination-atop

Существующее изображение остается только в тех местах, где оно пересекается с новым изображением. Новая картинка рисуется позади старого содержимого.

8

lighter

В тех местах где старое и новое изображение пересекаются идет вычисление нового цвета как суммы двух цветов картинок участников.

9

darker

В тех местах где старое и новое изображение пересекаются идет вычисление нового цвета как разницы между двумя цветами картинок участников.

10

xor

Изображение становится прозрачным в том месте где происходит пересечение старой и новой картинок. В остальных же местах изображение рисуется как обычно.

11

copy

Рисуется новое изображение, а все что было до этого убирается.

12
Задание 1. Создать надпись с градиентной заливкой и тенью. Задание 2. Используя композицию объектов, создать следующее изображение: задание ۞ → Читать Урок Текст. Комбинирование изображений.. rectExample Обновите браузер ۞ → Читать Урок Текст. Комбинирование изображений.. rectExample Обновите браузер */ ?>