Предыдущий ролик Следующий ролик  

Видео урок: Рисование изображений и видео

HTML5: графика и анимация с Canvas

Используя HTML5 элемент canvas, вы можете даже встраивать рисунки или видео в canvas на веб страницах. Это можно сделать программно через JavaScript. Используя функции для рисования изображений, вы можете делать это разными способами. Вы можете рисовать их из рисунка или элемента видео, которые находятся на странице либо загружаются динамически, либо из другого элемента canvas, который находится где-то еще на странице. Вы даже можете изменить размер или даже обрезать исходный рисунок. Давайте рассмотри некоторые шаблоны для рисования изображений.

Есть три способа рисовать изображения. Первый из них - самый простой. drawImage берет исходный рисунок, и исходное изображение - это либо тоже изображение, видео или canvas, и это изображение будет вставлено в canvas назначения в точке, определенной dx и dy. Это пункт назначения, где будет нарисовано изображение. Вторая версия drawImage снова принимает исходный рисунок и рисует его в canvas назначения в точке dx и dy, но функция масштабирует изображение, чтобы оно вписывалось в ширину, указанную dw, и высоту, указанную dh.

И последняя версия drawImage принимает исходный рисунок, но также принимает два набора аргументов, которые определяют, как должно быть нарисованы исходные и конечные данные. Она принимает исходный x и исходный y, а также исходную ширину и исходную высоту. На самом деле, вы можете нарисовать только часть исходного изображения в canvas назначения на dx, dy, а также по заданной ширине и высоте. Это кажется немного сложным. Наверное, лучше всего рассмотреть на примере, как это работает. Давайте взглянем.

Первая версия функции принимает изображение и dx и dy. Итак, у вас есть исходное изображение, а также у вас есть canvas назначения, эта версия просто принимает исходное изображение и копирует его прямо в canvas назначения в точке dx, dy. Следующая версия принимает изображение и рисует его в нужном месте, но опционально его масштабирует. Так, еще раз, у вас есть исходное изображение. У вас есть canvas назначения. Я нарисовал изображение в canvas в точке назначения. Но данном случае оно масштабировалось и стало немного больше.

Также мы можем сделать его немного меньше. Следующий пример немного сложнее. Функция принимает исходное изображение или опционально его часть и рисует его в canvas назначения. Вот здесь у вас есть исходное изображение, а вот здесь canvas назначения. Но сейчас у вас есть только часть рисунка, которую вы копируете. Вы копируете часть изображения в canvas назначения, основываясь на аргументах, которые вы передаете. Давайте рассмотрим все это в действии и взглянем, как все работает.

Вот я в примере. Это snippets, открыт файл images_start. Первый пример, который я вам покажу, состоит в том, как изображение рисуется напрямую в canvas. Копирую, иду вот сюда и вставляю. Теперь я получаю элемент image, используя getElementById, а затем просто рисую это изображение в canvas. Давайте спустимся сюда в документе, и вы видите, что это рисунок находится здесь, как и видео, и это источник для данного изображения.

И вы видите, что оба эти элемента установлены на not display, поэтому они не показаны на веб странице, когда мы подгружаем ее в браузер. Давайте рассмотрим все это. Вот здесь у нас изображения. Вот это рисунок, который я собираюсь использовать - симпатичный маленький снимок озера Тахо - а вот здесь видео. Итак, я собираюсь прорисовать это видео в canvas, и это просто базовое видео. Итак, вот оно. Давайте взглянем на первый пример. Поднимаемся вверх. Опять же, довольно прямолинейно. Просто получить рисунок и нарисовать его в canvas.

Сохраняем, и вы видите, как все работает. Изображение было скопировано, а затем вставлено в canvas. Давайте взглянем на другой пример. Для этого примера я нарисую уменьшенное изображение в canvas, используя второй вариант шаблона рисования. Но сначала я избавлюсь от этого примера, чтобы избежать столкновения. Избавляемся от этого комментария. Итак, это вторая версия функции drawImage. Идея состоит в том же, но на сей раз рисунок уменьшен.

В данном случае все выглядит так, как будто я уменьшил его почти наполовину. Сохраняю, обновляю. Все работает, давайте попробуем сделать это в другом браузере. Открываем пример в Firefox. Все тоже работает. Возвращаемся к коду. Все верно! Для следующего примера мы нарисуем только часть исходного изображения в canvas. Я копирую это, возвращаюсь к коду и вставляю.

Нам нужно указать прямоугольник, который начинается в исходном изображении - вот наше исходное изображение. Мы копируем эту часть исходного изображения в эту часть canvas. Сохраняем. Сейчас вот здесь мы получаем копию. Из исходного изображения будет изъят вот этот маленький островок, и он будет нарисован. Обновляем страницу. Мы можем видеть, что произошло. Возвращаемся в Firefox, делаем то же самое, обновляем страницу.

Вы видите, что в обоих случаях была взята часть исходного изображения и вставлена по месту назначения. Для последнего примера мы нарисуем видео. Рисование видео может быть немного сложным, потому что вы не можете просто сказать - эй, нарисуй-ка мне это видео. Функция drawImage нарисует все то, что будет текущей рамкой воспроизведения. Вот как мы должны сделать это. Во-первых, давайте прокрутим вниз.

Вот здесь есть видео. Это тег video. И вы видите, что будет повторяться воспроизведение, а также на данный момент тег спрятан. Видео не проигрывается. Здесь нет автопроигрывания. Нам нужно получить элемент video, сказать элементу video, что он должен быть проигран, а затем установить функцию interval, которая будет вызываться каждые 16 миллисекунд. Итак, каждые 16 миллисекунд мы будем получать canvas, рисующий контекст и элемент video, а затем мы просто нарисуем изображение из исходного видео напрямую в canvas.

Таким образом, во время проигрывания будет захвачена каждая рамка, каждые 16 миллисекунд, и будет нарисовано видео. Сохраняем, обновляем. Элемент video находится вот здесь, а это canvas. Но функция interval вызывается каждые 16 миллисекунд, что дает нам частоту кадров, которые нужны для проигрывания видео. Давайте попробуем запустить пример в Safari, потому что мы до сих пор мы ничего в Safari не просматривали, и мы видим, что в Safari также все работает. Итак, что мы видели? Мы рассмотрели способы, как рисовать изображения в canvas, а также мы увидели, как рисовать части изображения.

Мы изучили, как изменить размер изображений, и мы даже рассмотрели, как взять видео контент из элемента video и проиграть его в canvas.