Можностей, предоставляемых веб-разработчикам



Pdf көрінісі
бет199/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   195   196   197   198   199   200   201   202   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

174  •  Глава 5
Представленный выше код — это простой пример динамического создания изображения 
налету. Как только оно загружается, я могу вывести его часть на холст. Как вы узнаете 
через мгновение, есть несколько способов применения метода drawImage; здесь я вырезал 
квадрат со стороной 10 пикселов, увеличил его до квадрата со стороной 100 пикселов и рас-
тянул на квадратный холст со стороной 500 пикселов.
Захват изображения из элемента <
video>
 предлагает несколько интересных возможностей. 
В сети есть множество демонстрационных проектов, включая динамическую вставку содер-
жимого в видео, замену зеленого фона и распознавание лиц — все это делается с помощью 
холста и видео и программируется на знакомом JavaScript.
Захват и рисование происходят в методе 
drawImage
, которому требуется ссылка на источ-
ник (изображение, видео или холст), целевые координаты (координаты точки, обознача-
ющей верхний левый угол изображения, которое будет нарисовано на холсте) и несколько 
вспомогательных аргументов для обрезки и масштабирования изображения:
„
„
drawImage(image,
 
dx,
 
dy)
„
„
drawImage(image,
 
dx,
 
dy,
 
dw,
 
dh)
„
„
drawImage(image,
 
sx,
 
sy,
 
sw,
 
sh,
 
dx,
 
dy,
 
dw,
 
dh)
Здесь координаты, начинающиеся с 
d
, — это координаты итогового изображения, 
а 
s
-координаты обозначают положение источника. Например, я хочу взять синергети-
ческие видео Брюса из четвертой главы и соорудить наверху своей веб-страницы ленту 
из картинок, на которых Брюс колотит банан. Для этого мне понадобится кадрировать 
и масштабировать видео с помощью метода 
drawImage
.
Вот какие компоненты мне потребуются:
„
„
холст, размещенный наверху страницы;
„
„
скрытый элемент 
1   ...   195   196   197   198   199   200   201   202   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет