ArtemSmirnov 16 мая 2011 в 15:15

Еще одно Canvas руководство [3]: Рисование изображений и текста, сохранение изображения и состояния

3 мин

5.5K

Введение

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

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

Объект изображения

Чтобы нарисовать изображение нужно создать его объект. В качестве конструктора выступает функция Image. Она не принимает аргументов, а чтобы установить путь к изображению нужно изменить свойство src полученного объекта. Давайте добавим в наш скрипт строку:

var img = new Image()
img.src = 'path.png'

Загрузим изображение

Теперь стоит заметить что прежде чем рисовать изображение его стоит загрузить для этого добавим обработчик события load для объекта img, добавим его после создания объекта, в итоге получится такой вот код:

var img       = new Image()
img.onload =  function(){
    //Тут ваш код для работы с контекстом
}
img.src       = 'path.png'

Нарисуем изображение

drawImage(object img, float x, float y)

— нарисует изображение с исходным размером так чтобы его верхний левый угол был в точке (x;y).

Масштабируем

drawImage(object img, float x, float y, float w, float h)

— работает также но вместо исходного размера рисует с шириной w и высотой h.

Обрежем

drawImage(object img, float sx, float sy, float sw, float sh, float cx, float cy, float cw, float ch)

— нарисует часть изображения шириной sw и высотой sh расположенную в точке (sx,sy) в исходном изображении на canvas с шириной cw и высотой ch в точке (cx,cy)

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

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

Нарисуем залитым

ctx.fillText(string text, float x, float y)

— нарисует текст в точке (x;y).
Примечание: функция fillText имеет необязательный аргумент maxWidth, но он паршиво работает в FF и вообще не работает в Chrome.

Изменим шрифт

Свойство контекста font управляет стилем текста и имеет синтаксис схожий с css, для примера добавим в наш скрипт следующие строки:

ctx.font = "bold italic 30px sans-serif"
ctx.fillText("Привет Хабр",300,300)

Управлять цветом и не только мы можем через свойства fillStyle и strokeStyle

Нарисуем контуры

Внимательный читатель вероятнее всего логически догадался что для рисования контуров текста применяется функции strokeText, заменим в нашем примере fillText на strokeText.

Выравняем по горизонтали

Для выравнивания текста существует свойство textAlign, оно может принимать пять возможных значения:

left — текст выравнивается слева
right — текст выравнивается справа
center — текст выравнивается по центру
start — (значение по умолчанию) текст выравнивается от начала линии слева для письма слева на право и выравнивается справа для письма справа налево
end — текст выравнивается от начала линии справа для письма слева на право и выравнивается слева для письма справа налево

Линия основания текста

Для управления линией основания текста существует свойство textBaseline, оно может принимать следующие значения:top,hanging,middle,alphabetic,ideographic,bottom. Смысл этих значений легче показать чем описать, поэтому на WhatWG была найдена картинка:

Измерим ширину

measureText(string text)

— вернет специальный объект TextMetrics который на данный момент обладает только одним свойством — width — ширина текста в пикселях.

Сохранение изображений на стороне клиента

Для сохранения изображений существует аж три метода (getAsFile,getBlob,toDataURL), но мы рассмотрим лишь toDataURL поскольку именно он наиболее хорошо поддерживается браузерами. Стоит заметить что метод применяется не к контексту, а к canvas элементу, впрочем его можно получить как свойство 'canvas' контекста, также этот метод принимает как аргумент тип изображения (по умолчанию 'png'). Этот метод вернет изображение в формате base64.

Сохранить нельзя восстановить

Если какое-то свойство контекста изменить то оно повлияет на все последующие, для упрощения жизни разработчикам в спецификации есть два метода контекста save и restore.
save — сохраняет текущее состояние
restore — восстанавливает последнее сохраненное
Рассмотрим простой пример:

ctx.save()
ctx.textAlign = 'center'
ctx.font = "bold italic 30px sans-serif"
ctx.strokeText("Привет Хабр",300,300)
ctx.restore()
ctx.fillText("Привет Хабр",400,400)

Как видно, вместо того чтобы сбрасывать все свойства на начальные мы просто использовали save и restore

Хабы:

Canvas