Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Текст на холсте

.

Текст на холсте

Если вы просматриваете локальную копию HTML5 Herald, то столкнетесь с той же самой ошибкой системы безопасности Firefox и Chrome, что и при обработке статического изображения.

Добавим небольшой блок проверки, чтобы наше видео воспроизводилось независимо от того, где оно размещено — на сервере или на локальной машине.

Первый шаг — добавляем конструкцию try/catch:

Текст на холсте

Текст на холсте

Когда при попытке вызова getlmageData возникает ошибка, было бы неплохо вывести пользователю на экран какое-либо сообщение, указывающее на источник проблемы. Именно это мы и делаем, используя метод f illText.

Прежде чем вывести какой-либо текст на холст, нужно очистить его от наличествующих изображений.

В настоящее время там имеется первый кадр видео, помещенный на холст функцией drawlmage. Как его стереть?

Оказывается, если переустановить высоту или ширину холста, его содержимое очистится. Поэтому давайте снова зададим ширину:

Текст на холсте

Далее изменим фоновый цвет с черного на прозрачный:

Текст на холсте

Прежде чем мы сможем что-либо написать на холсте, мы должны указать стиль текста — точно так же, как это делается для путей. Используем методы fillStyle и textAlign:

Текст на холсте

Текст на холсте

Следует также указать используемый шрифт. Свойство font объекта context работает точно так же, как и свойство font каскадных таблиц стилей. Мы укажем размер шрифта 18рх и зададим список возможных гарнитур, разделенных запятыми:

Текст на холсте

Обратите внимание, что мы используем гарнитуру League Gothic; любые шрифты, включенные директивой @font-face, можно использовать в элементе canvas. Итак, мы нарисовали текст. Мы используем метод fillText, выводящий блок текста в точку, заданную координатами (х, у). Поскольку наше сообщение довольно длинное, мы разделим его на несколько фрагментов:

Текст на холсте

В качестве завершающего шага наша функция возвращает false. Это позволяет задействовать блок проверки исключений. Если имеется исключение, надо остановить вызов drawOneFrame для каждого кадра и выйти из функции:

Текст на холсте

Текст на холсте

.

Читайте так же:
Not found