Canvas, это специальный элемент который позволяет в HTML документе создавать растровую графику. На стороне клиента, с помощью java script кода мы можем рисовать различные примитивы, создавать какие то узоры, рисовать изображения и изменять эти изображения. Все это делают на стороне клиента. Для чего может пригодится canvas. Какие типы приложений мы можем создавать, используя canvas. Первое, мы можем создавать различные мультимедийные приложения, такие как браузерные игры, можем создавать бизнес приложения в которых определены интересные интерактивные элементы, с красивым оформлением. Можем создавать приложения, в которых происходит планирование чего либо. Можем создавать диаграммеры, позволяющие строить графики. Для того что бы увидеть весь перечень и возможные вариации использования canvas. Мы можем посетить такой сайт как canvasdemos. Здесь собрао очень много различных примеров использования canvas в играх, в приложениях различного назначения, приложениях для обучения. Можете пройтись по главному меню этого сайта и посмотреть приложения, которые написаны на canvas, игры, так же можете посмотреть tutorials. Рекомендую этот сайт просмотреть после завершения урока. Давайте продолжим рассматривать презентацию и разберем, что такое canvas, как он настраивается в HTML документе. Слайд 2, как мы уже сказали canvas это элемент, позволяющий создавать растровую графику, с помощью java script кода. Canvas из себя представляет прямоугольную область, если вы посмотрите на слайд, то увидите что начало координат canvas, этто левый верхний угол. Видите как у нас тут оси координат. По горихонтали х-координата, по вертикали у-координата. Если мы будем определять точку, рисовать линию. Если мы будем использовать некоторые из функций java script для рисования на канвасе. Мы будем всегда определять координаты точек, используя 2 целочисленных значения. Первое целочисленное значение будет определять координату х, второе координату у. Если мы создадим точку с координатой 4 и 3, то точка будет находится в этой координатной области canvas. Давайте посмотрим как canvas поддерживает на данный момент, как он поддерживается в браузерах. На слайде 3 вы видите скриншом сайта caniuse. И на этом скриншоте мы можем видеть, что canvas уже достаточно хорошо поддерживается браузерами, 84% браузеров имеют полную поддержку элемента. Единственное, IE8 который является еще достаточно популярным браузером, canvas не поддерживает полностью. По этому, для того что бы решить проблему с IE8 или ранней версии, нам необходимо имитировать поведение canvas, через подключение специального java script кода, дополнительных библиотек. Естественно, это не очень хорошее решение, потому что оно будет не такое производительное как использование родного canvas, которое встроенное в браузер. Если вы расчитываете, что ваше приложения будут использовать посетители, работающие с IE, то в таком случае вы должны в приложение добавить ссылку на специальную библиотеку, которая назвивается explorer canvas. Эту библиотеку вы можете скачать по ссылке, которую вы видите сейчас на слайде. Подключить эту библиотеку можно очень простым способом. Что бы она не работала в других браузерах, которые поддерживают canvas, вы можете подключить библиотеку через использование специального комментария в элементе head. В комментарии у нас установлено условие, если браузер который выполняет загрузку текущей страницы является IE версии ранее 9, то в таком случает этот элемент кода не должен читаться комментарием, он должен подключиться и IE8 и более ранней версии должен будет использовать библиотеку excanvas. По сути вот эта запись означает less than IE9. То есть если версия меньше 9, этот блок кода нужно использовать. Другой вариант подключения библиотеки excanvas, это использование modernizer. Вы помните что в первом уроке мы разбирали как можно, используя modernizer сделать проверку наличия поддержки некоторой функции HTML5 и подключить соответствующий java script код. Один из вариантов вы можете выбрать для того, что бы реализовать canvas даже в браузерах которые не поддерживают. Но это не очень хорошее решение, так как производительность будет на порядок хуже чем с использование настоящего канваса. Перед тем как смотреть следующие примеры, давайте посмотрим минимум кода, который нужно выполнить для того что бы начать работать с канвасом. Сам по себе канвас является обычный элементом разметки. Видите, сейчас на слайде маленьких блок кода, определяет элемент на странице с id=c. Если браузер понимает, что такое canvas, то этот элемент будет использоваться как область, в которой отображается растровая графика. Если браузер не знает о существовании canvas, то тогда canvas превратится в обычный div и по сути содержимое канваса, то что находится внутри, будет видимое пользователю. Canvas уже не будет отображать никаких графических элементов. Если мы создали canvas в документе, то для того что бы начать создавать что то в канвасе и использовать канвас, нам нужно написать как минимум 2 операции в java script, которые дадут нам возможность получить доступ к контексту канваса. Первая операция, которую мы должны выполнить, это найти сам элемент в теле браузера. Найти дом элемент по айдишнику, например. А далее, в этом найденом элементе нам необходимо вызвать метод getcontext. Благодаря вот этому методу, мы получаем специальный объект через который будет производится изменение данных на канвасе. Рисование происходит через контекст. Создавая контекст мы в качестве параметра должны передать константу. 2d строковое значение, которое укажет что мы собираемся использувать двумерную графику и рисовать двумерные элементы.

Теперь давайте посмотрим примеры, показывающие как вы можете рисовать в канвасе, с помощью java script кода. Сам по себе канвас является обычным элементом разметки. На 29 строке мы определиляем канвас, задаем ему атрибут id и вы видите что с помощью атрибутов height, width, style мы определяем размеры и оформление канвас элемента. Получается что канвас может быть настроен точно так же как и любой другой элемент разметки. Мы указали, что канвас будет являтся квадратной областью с размерами 300х300 пикселей и добавили для канваса серую рамочку, что бы его было видно. Так же обратите внимание, что в канвасе находится текст. Этот текст будет отображен пользователю, если браузер на понимает что такое канвас. если для браузера элемент является неизвестным, он будет воспринят как обычный div. А что делает браузер, если у него на странице находится div, показывает содержимое элемента. Соответственно содержимое, которое мы здесь видим, отобразится если браузер не поддерживает элемент канвас. Вы можете в этом блоке определить ссылки на последние версии браузера и сказать пользователю что для корректного просмотра текущей страницы, нужно скачать последнюю версию браузера. Далее что мы делаем. На строке 24 мы проверяем поддержку функции addeventlist в текущем браузере. Если она поддерживается, с ее помощью добавляем обработчик на событие load. В качестве обработчика у нас будет выступать событие draw, которое нарисует на канвасе простую линию. На строке 7 вы видите, что функция draw определена и в этой функции на 9 строчке мы проверяем поддерживается ли канвас браузером, для того что бы узнать можно ли выполнять функцию рисования или нет. Если браузер не поддерживает канвас, то пользователю уже отобразится сообщение, что браузер не поддерживает канвас. Нам теперь остается проверить, будет ли работать наш код. Если он не сработает, то просто не выполнять его. Мы берем с помощью библиотеки modernizer, проверяем наличие поддержки канвас, если канвас не поддерживается, мы выполняем возврат и функция прекращает работу, никакой код связанный с работой канваса у нас не выполнится. Если же браузер поддерживает работу с канвас элементом, то строка 12. Вначале мы находим дом эелемент по id canvas, то есть получаем ссылку на этот объект. И далее 13 строчка, мы получаем самую важную сущность, с помощью которой будет производится рисование на канвасе, для того что бы начать рисовать нам нужно получить контекст. Контекст получается с помощью вызова метода getcontext на объекте канвас. Так же при вызове getcontext, в качестве параметра мы передаем значение 2d. Что означает, что мы собираемся рисовать двумерную графику на канвасе. Мы получили контекст и теперь переходим к рисованию. Строка 16, мы вызываем функцию beginpath, которая указывает на то что мы сейчас начинаем рисовать определенную замкнутую фигуру. То есть определенную геометрическую фигуру. На 17 строке мы вызываем на контексте вторую функцию, функцию move to. Задача move to передвинуть виртуальный карандаш на указанные координаты. Если мы вызвали move to, это значит что мы передвигаем карандаш не проводя линию, то есть несем карандаш над полотном. Мы спозиционировали карандаш в координат 100 100. Теперь строка 18, на контексте вызывается метод line и передается значение 200 200, это значит что мы сейчас опускаем карандаш на полотно и ведем линию к точке 200 200. Получается от координаты 100 100 до 200 200 проводится черная линия толщиной в 1 пиксель. Мы можем продолжить так рисовать. Нарисовать достаточно сложную фигуру. Но для того что бы эта фигура стала видимая пользователю, нам необходимо завершить рисование, вызвав метод stroke на контексте. Если мы вызываем метод stroke, это значит, что то что мы нарисуем через методы move to, line to и другие методы которые мы будем смотреть, все это превратится в очертания, то есть мы просто нарисуем очертание той фигуры, которая была создана. Дальше мы увидим другие методы, позволяющие по другому отображать пользователю данные. Вы видите, мы достаточно большой написали блок кода. Все что делает это блок кода, это выводит линию по диагонали. Вот координаты 100 100, вот координаты 200 200. Вот линия которую мы прорисовали используя функцию stroke. Это все у нас canvas. Не очень впечатляюще, но если вы продолжите просмотр этого видео и продолжите изучение canvas, то сможете рисовать достаточно сложные и более интерактивные обьекты на canvas. В следующем примере мы посмотрим использование техники, позволяющей создавать достаточно сложные фигуры на канвасе. Фигуры которые состоят из большого количества точек и координат. Во всех примерах, которые мы будем сейчас разбирать у нас будет менятся та часть, которая находится после вызова метода getcontext. Мы получаем контекс и дальше у нас идут изменения. Если вы рассмотрите следующие примеры, то увидите, что они имеют все одинаковую структуру. Вот мы можем в этом убедится. Такой же канвас как в предидущем примере и такой же блок java script кода. Единственное меняется его содержимое. Смотрим на троку 16, первое отличие от предидущего примера это вызов метода save на контексте. Метод save, перед тем как мы начинаем какие-то изменения. Когда мы вызываем метод save, это значит, что мы сохраняем текущее состояние контекста. Сохраняем текущую систему координат и текущее графическое состояние. Далее стркоа 19, мы на контексте вызываем метод translate. Этот метод говорит о том что мы должны перенести начало координат с текущей позиции на позицию 100 100. Вот представте себе, идет наш канвас, сейчас он представляет такую область. Начало координат находится вот здесь. Позиция 0 0. На строке 16, когда мы вызвали метод save, мы сохранили такое состояние канваса, как он сейчас определен. На строке 19, когда мы вызвали метод translate со значениями 100 100, мы сказали что хотим перенести начало координат на позицию 100 100. Теперь у нас канвас имеет начало координат вот здесь. Относительно старого канваса эта позиция 100 по х и 100 по у. Получается что сейчас если после выполнения трансформации translate мы начнем рисвоать линии, примитивы, они будут рисоваться с координаты 100 100. Вот на строке 20 мы вызываем метод begin path, вызываем move to и мы сейчас передвигаемся не на позицию 100 100, как в предидущем примере, а передвигаемся еа позицию 0 0. Так как у нас сейчас контекст канваса сместился, мы сейчас находимся по координате 100 100, если брать относительно старого канваса. Но вызывая метод move to 0 0, потому что мы работаем во втором прямоугольнике, в контексте который мы немного сместили. Строка 24, вызываем метод line to. Получается мы рисуем зеленую линию от 0 0 до 100 100. Строка 25 вызываем метод stroke, делаем очертания этой нарисованой линии. Далее на строке 28 мы вызываем контекст, это значит что мы возвращаем состояние контекста на последнее сохранение. А последнее сохраненное состояние было на 16 строке. Получается после вызова, эта красная рамочка исчезает, мы возвращаемся в свое изначальное положение, вот это вот положение, в котором мы были в самом начале. Для чего это используется. Представте что на строке 24 у вас не 1 раз вызывается line to, а несколько десятков раз. То есть вы рисуете из линий какую то сложную фигуру. И представте, ваша задача потом эту фигуру перенести на 10 пикселей влево или на 10 пикселей вправо. Вам придется Взять и все вызовы методов line to пересчитать, так что бы они использовали новые координаты. Если вы используете вот такой подход. Если вы используете перед рисованием фигуры функцию translate, а саму фигуру рисуете относительно начала координат, то перемещение нарисованой фигуры очень упростится. Смотрите, что я имею в виду.

Если мы сейчас запускаем приложение, вот мы нарисовали нашу линию. Теперь мы хотим сделать так что бы эта линия сдвинулась например вправо, что бы мы на 10 пикселей ее подвинули вправо. Все что нам нужно сделать, это взять и поменять вызов функции translate. Мы указываем где будет наше начало координат и получается, что дальнейший код нам переписывать не приходится. Мы просто определяем, куда сместить начало координат перед рисованием. Смотрите что теперь получается. Фигурка у нас немножко сдвинулась вправо. Но при этом мы не линии перерисовываем, а просто смещаем начало координат. Следующие фигуры, которые будут рисоватся, они будут рисоватся относительно этого начала координат, потому что на строке 28 мы вызвали функцию restore. И восстановили контекст. Вот это такая полезная техника, которую мы используем когда рисуем сложные фигуры. В следующем примере мы посмотрим, как можнос создавать замкнутые геометрические фигуры. На строке 18, после того как мы получаем канвас, сохраняем и смещаем контекст на необходимую нам позицию, на строке 18 мы вызываем функцию beginpass и начинаем рисовать фигурку, которая будет из себя представлять квадрат. Мы двигаем вначале контекст на координаты 0 0, потом вызываем line to на 100 0, то есть делаем линию горизонтально вправо, потом 100 100, опускаем линию вертикально вниз. Потом 0 100, линию рисуем горизонтально в левую сторону и далее строка 25. Мы вызываем функцию context closepath. Это значит, то мы должны на 25 строчке провести линию, которая соединит нас с началом той линии, которая была вызвана на стркое 19. То есть мы сейчас на 25 строчке закрываем фигуру и автоматически соединяемся с начальной точкой, с которой мы начинали рисование. На 28 строчке вызывая функцию stroke, мы рисуем ту геометрическую фигуру, которую сейчас создали. Видите, нарисован квадрат. Еще раз, в чем преимущество функции translete, если было не понятно в предидущем примере. Представте, что этот квадрат нужно сдвинуть на 10 пикселей влево или вначало координат. Получается, что если у нас не будет функции translate, то менять придется все эти значения, что будет не очень удобно, придется переписать 4 точки, сменить 8 координат. А если мы имеем вызов функции translate, то все что нужно сделать дял внесения изменений, это поменять первоначальное значение. Вот небольшимы изменениями мы поменяли расположение квадрата на канвасе. В этом примере мы увидили использование функции closepath, которая автоматически замыкает фигуру, делая ее закрытой. В следующем примере мы посмотрим, как можно поменять стиль линий, которыми мы отображаем геометрическую фигуру. Смотрите, точно так же мы сохраняем контекст, делаем перемещение, рисуем геометическую фигуру. А теперь мы начинаем настраивать эту фигуру. Строка 27, мы указываем толщину линии, определяем толщину 8 пикселей. Далее указываем strokestile, указываем цвет линий, може указать цвет с помощью имени либо с помощью хекс значения. Все значения, которые вы можете использовать в css, для определения цветов, вы можете использовать так же и здесь для определения линии канваса. Строка 29, line join мы указываем как будут у нас выглядеть стыки линий, то есть на углах у нас линии должны быть закруглены. И вызывая функцию stroke, применяя эти настройки для рисования линий, мы создаем очертания нарисованной фигуры. Вот, в предидущем примере фигура была у нас серой, а сейчас она выводится зеленой и обратите внимание на углы. Видите они у нас закругленные, потому что это мы указали параметром round. В следующем примере мы посмотрим как прямоугольную область можно залить определенным цветом. То есть не просто сделать начертания, а именно сделать заливку квадрата. Точно так же, как и в предыдущем примере. Канвас, контекст, делаем то же самое что и до этого, но теперь на строке 27 перед тем как рисовать очертание фигуры, ы указываем что fillstyle, в контексте сейчас blue. Это значит, что если где нибудь ниже по коду, после задания этого свойства мы вызовем метод fill, это будет значит что нарисованная фигура должна быть заполнена синим цветом. Строка 31 мы определяем настройки для рамочки и смотрите как мы указываем цвет. Если в предидущем примере мы использовали имя для цвета, в этом примере примере мы используем функцию rgba и указываем интенсивности красного, зеленого и синего канала и альфа канала, который будет указывать прозрачность. Далее делаем определение, что углы должны быть закругленными и вызываем функцию stroke, делаем очертания фигуры. Посмотрите что получается. Вот нашквадрат, серая рамочка и синяя заливка. Момент, в который вы вызываете функцию stroke, достаточно важен. Если мы сейчас функцию fill вызовем после stroke, видите что у нас получится. Рамка наша не 8 пикселей в толщину, а 4. Потому что мы поверх рамки сделали заливку и соответсвтенно немножко захватили раму и она стала уже. Так как прямоугольные области приходится достаточно часто создавать, в контексте есть специальные методы для создания прямоугольников. Посмотрите на 6 пример, насколько он упростился по сравнению с предидущими. Хотя здесь мы тоже рисуем прямоугольники. После получения контекста, 14 строчка мы указываем что fillstyle, будет у нас синим то есть мы хотим сделать синую заливку и строка 15 мы вызываем метод fillrect. Мы указываем что собираемся синим цветом заполнить прямоугольную область. Начало прямоугольника это 100 100, а высота и ширина прямоугольника это 50 пикселей. Сейчас мы определили что в канвасе должен находится синий прямоугольник 50х50. 18 строчка, другой способ определения квадратов и прямоугольников, это использование метода strokerect. Те же самые параметры, начало координат и размер той прямоугольной области, которую мы должны уже не залить цветом, а сделать обводку. Мы указываем что толщина обводки будет 10 пикселей и цвет обводки будет красный. И последняя функция, которая позволяет работать спрямоугольниками, это clearrect. Но она делает противоположное действие относительно fillrect, эта функция очищает прямоугольную область. Мы тоже указываем точку, в которой будет начинаться прямоугольник и его ширину с высотой. Вот вы видите что получается. Видите, строка 15, fillrect вот наш синий прямоугольник, сверху по синему прямоугольнику была нарисована красная рамка, толщиной 10 пикслелей. А потом мы вырезали маленькаий кусочек из нашего прямоугольника. Вот методы, которые позволяют быстро создавать прямоугольную область в канвасе. С помощью функции clearrect, мы увидим в следующем примере, мы будем делать анимацию. Нарисовали какой нибудт элемент на экране, подождали несколько секунд, стерли его и нарисовали рядом, подождали, стерли его и так далее.

По этому метод clearrect будет использоваться в следующих примерах, когда мы дойдем до анимации. Перед тем, как переходить к следующим примерам, давайте вернемся к презентации и посмотрим несколько слайдов. Мы с вами остановились на 5 слайде. 6 слайд, это те функции, которые мы сейчас рассмотрели. Рассмотрите потому эту таблицу повторно, что бы отложить в памяти пройденный материал. Работа с прямоугольниками, функция которую только что мы рассмотрели. Сейчас мы подходим к теме, показывающей как можно создавать кривые. В канвасе есть несколько функций, которые позволяют нарисовать кривую. Сейчас мы с вами разберем 2 функции, это quadraticcurveto, beziercurveto. Когда мы определяем кривую, нам неоходимо задать либо 3 либо 4 точки, в соответствии с типом кривой, которую мы собираемся рисовать. Когда мы будем рисовать кривую, в любом случае контекст будет находится в определенной координате. Вот смотрите на слайде, представьте что мы передвинули контекст вот в эту координату. Далее для того что бы нарисовать вот такую кривую, нам необходимо вызвать функцию quadraticcurveto, которая относительно текущей нашей координаты, будет рисовать кривую в координату х, у. То есть вот в эти координаты, которые указаны и изгиб кривой будет контролироваться точкой, которая указана первым и вторым аргументом. Вот это контролирующая точка, если мы будем ее поднимать или опускать, то кривая будет пологая или более искривленная.Если мы хотим сделать кривую более сложную, то можем использовать функцию beziercurveto. В этой функции будут находится 2 контролирующие точки и соответственно мы можем перемещая эти точки, контролировать то как кривая будет у нас формироваться и отображаться пользователю. Вы можете почитать на википедии, что такое кривая bezier, посмотреть с какими формулами она расчитывается. Мы сейчас этого делать не будем, а просто посмотрим в примере, как с помощью кода можно такие кривые определить. Вначале мы разберем quadraticcuveto, потом beziercurveto. Как и в прошлых примерах, код у нас не меняется. После получения контекста мы делаем передвижение в точку 0 100 и из это точки мы хотим сделать линию в точку 100 100. И сделать так, что бы эта линия была изогнутая. Вот получается что на 16 строке мы указываем, что создаем кривую. Указываем что контрольная направляющая точка будет находится в координате 50 0 и куда мы будет линию вести, это координата 100 100. Линия у нас будет 3 пикселя в ширину, красного цвета и фактически рисуем мы эту линию на 20 строке. Давайте посмотрим результат. Видите как наша линия нарисовалась. Вот значение 0 100, точка которая мы создали на 14 строке. Вот значение 100 100, точка котору мы указали в 3-4 аргументе. А на 16 строке, управляющая точка находится в этой части канваса. Если мы хотим линию сделать не такой изогнутой, мы можем эту точку опустить и сделать значение не 50 0, а поставить точку где нибудь в этой облачти. Если мы хотим поствить управляющую точку сдесь, то линия у нас получится более пологой. Давайте сейчас посмотрим, сто произойдет если здесь поставим значени 50 50. Сохраним, вернемся в браузер и обновим браузер. Линия теперь не такая пологая. Чем ближе линия будет к нижней границе канвасе, тем меньше изгиб мы будем видить. Криваю почти превратилась в линию. Следующий пример показывает использование beziercurveto. На 14 строке 0 100, начальная координата. Проводить мы будем в координату 100 100. Управляющие точки в координате 10 10 и 90 10. Получается, что сечас первая управляющая точка находится гдето здесь, вторая где то здесь. Давайте посмотрим, сто получится если первую управляющую точку мы перенесем, например вот сюда. Давайте пропробуем сменить координату, допустим на 50 70. Сохранить, открыть браузер и обновить. Видите какая получилась у нас кривая. Вот получается , второй вариант рисования кривых используя эту функцию. В следующем примере мы посмотрим, как с помощью специальной функции отображать в канвасе изображение. Давайте запустим этот пример. В канвасе у нас отображается логотип HTML5. Это сделать очень просто. Для того что бы отобразить логотип, первое что нужно сделать это создать обьект image, дальше указать адрес и на 16 сроке определить что должно происходить, когда картинка будет загружена браузером. Видите что на событие unload мы вешаем обработчик и 17 строчка. Мы указываем что на контексте мы вызываем метод drawimage. Указываем картинку, которую собираемся рисовать и указываем где именно картинка будет нарисована. При этом мы не указываем размеры картинки и оставляем ее естественные размеры, которые были. Вприниципе этот код будет работать в большинстве браузеров, но желательно что бы вы немножно по другому определяли вывод изображений. Лучше определение адреса, по которому находится изображение переносить после того как у вас определяеться обработчик на событие unload. Потому что некоторые браузер ы могут некоректно отработать и изображение у вас так и не появится. Например старые версии фаерфокса не будут выводить изображение, если код определения значения src будет находится до определения функции unload. По этому лучше что бы именно так находился вывод изображения. Изображение выводится, но так у нас есть гарантия что мы не определили значения свойства src, у нас произошло событие unload. Браузер уже загрузил картинку, а только после того как картинка загрузилась, мы указали что нужно сделать после того как картинка загрузится. Получается, что эта операция не выполнитсяя, потому что картинка и так загрузилась. По этому лучше делать вот такое изменение, что бы гарантировать загрузку изображений. В следующем примере мы посмотрим как можно создавать патерн, как можно делать заливку определенной области канваса. На строке 13 мы сейчас создаем обьект image, потому что шаблон который мы будем рисовать на канвасе будет состоять из повторяющихся изображений. Вот мы получили картинку, указали что именно нужно будет использовать в качастве картинки, а далее когда картинка будет загружена, на строке 17 мы называем что будет использоваться для заполнения некоторой области. Указываем свойство fillstyle. Но если в предидущих свойствах fillstyle мы указывали цвет, то сейчас мы записываем специальный обьект. Который создается с помощью метода createpattern. В этот обьект передается картинка, которая должна будет использоваться и передается значение, которое вы использовали когда задавали фон для обычного HTML элемента. Repeat x, repeat y, для того что бы повторять изображение по горизонтали и вертикали. И далее на 18 строчке мы используем fillrect, что бы полностью заполнить весь канвас. Посмотрите как заполнится канвас.

Это изображение мы продублировали несколько раз, потому что указали значение repeat на 17 строчке. Давайте посмотрим что произойдет если мы укажем repeat x. Видите, только по оси х у нас происходит повторение изображений. В следующих примерах мы разберем, как с помощью контекста создавать градиенты. В первом примере мы посмотрим как создавать линейный градиент. Градиенты работают точно так же как и повторяющиеся узоры. На 14 строчке мы создаем переменную gradient, с помощью вызова метода createlineargradient. Настраиваем этот элемент, а потом в итоге этот обьект мы записывам в качестве fillstyle. Получается что вызов элемента для заполнения прямоугольника, использует настроенный нами градиент. Давайте детальнее посмотрим, как именно настраивается градиент. Первое, что значат цифры передающиееся в параметр метода. Мы сейчас создаем линейный градиент. Это значит что цвет будет распостранятся по вектору. Представьте что мы создаем градиент, из точки 0 0 из точки 0 300 у нас будет проходить линия. Куда этот вектор направляется, указывает вторая координата. Далее мы этот вектор хотим заполнить цветом. И для того что бы указать переходы цвета на протяжении этого вектора. Мы используем метод addcolorstop. Этот метод принимает 2 параметра, относительное значение гду будет использоваться ключ с определенным цветом и непосредственно сам цвет. Мы указываем что в значении 0 у нас будет находится синий цвет. Потом мы указываем что на средине линии будет использоваться свесло синий цвет. С позиции 1 будет находится цвет белый. Получается что браузер самостоятельно сделает расчет, как должен цвет от синего перейти в светло синий и от светло синего в белый. Давайте запустим пример, видите как произошел переход. Давайте попробуем добавит еще один градиент в позиции 0.3 и не синего цвета, а например красного. От синего к красному, от краснго к светло синему и от светло синего к белому. Градиент у нас был нарисован. В следующем примере мы увидим другой способ настройки градиента. На 14 строке мы создаем линейный радиент, который идет с координатой 100 100 в координату 200 200. Градиент использует 2 цвета. Вначале красный, вконце оранжевый. Градиент будет распостранятся по диагонали слева на право. На 19 строке мы используем градиент в качестве fillstyle контекста и 20 строчка рисуем прямоугольник с высотой и шириной 100 пикселей. Строка 22 мы создаем еще один линейный градиент, но при этом немножко по другому настраиваем colorstop. Мы используем функцию rgba, в которой передаем вначале цвет а потом значение прозрачности. Этот colorstop будет у нас черного цвета, но наполовину прозрачным. Следующий colorstop будет серого цвета и тоже наполовину прозрачным. Последний будет светло серый, но тоже наполовину прозрачный. На 30 строчке рисуем еще один прямоугольник. Обратите внимание что начало этого прямоугольника позиция 150 150. Получается что этот прямоугольник находится в средине предидущего прямоугольника. Благодаря тому, что у нас градиент полу прозрачный, мы будем видет как у нас идет просвечивание от второго прямоугольника. Посмотрите что получилось. Если мы возьмем и поменяем значение 0.5 на 1, прозрачность исчезнет. От черного в светло серому у нас будет простой градиент. В следубщем примере мы увидим как можно настроить радиальный градиент. Натройка радиального градиента отличается от настройки линейного градиента. Посмотрите на 14 строчку, когда вызывается метод createradialgradient, в этот метод нужно передать намного больше параметров. Что означают эти параметры. Первые 2 значения 150 150, это точка первого круга. Третье значение это радиус первого круга. Потом точка определяющая координату центра второго круга и радиус второго круга. Что б вам было понятнее давайте посмотрим вот с такой стороны на это определение. Вот наша точка 150х150, мы определили центр окружности. Значение 100, это радиус этой окружности. Вторая координата 150 150, тоже находится в этой точке и радиуз второй окружности у нас 200. Теперь когда мы будем настраивать колорстопы, у нас они будут настраиватся вдоль вектора, который идет от центра к внешнему краю окружности. Вот здесь у нас будет находится оранжевый цвет. От позиции 0 до 1 у нас будет происходить плавный переход от оранжевого к красному. А все что находится здесь, это все будет чисто красного цвета. Посмотрите что получается. Красный прямоугольнык, оранжевый центр и вот у нас идет плавный переход. Если мы позьмем и поставим значение первого радиуса не 100, а 10 то получается что переход у нас будет более плавным. Оранжевый цвет у нас заканчивается здесь и на протяжении оставшегося отрезка у нас идет плавный переход на красный. Если мы здесь напишем 190, то мы увидим очень резкий переход от оранжевого в красный. В следующих 4 примерах мы разберем трансформации, которые существуют в канвасе и начнем из самой простой трансформации, это трансформация translate. Все эти примеры будут построены таким образом, что бы мы могли поекспериментировать с трансформацией и посмотреть как она работает. Запусти первый пример. У нас есть координаты, которые мы можем менять, например координаты 10 50, нажимаем translate и зеленый квадрат рисуется по этим координатам. Пишем 150, квадрат перемещается вот в эту координату. Давайте еще раз разберем, как работает функция translate. Посмотрим под другим углом. На 38 строке мы определили канвас, в котором будет рисоваться прямоугольник. 40 строчка - блок, в котором будут находится элементы управления для координат канваса. У нас есть элемент input с айдишником х,у. Кнопка, нажатие по которой приведет к перемещению. Когда загружается документ, срабатывает loadhandler для того что бы проще было находить элементы на странице. Мы создаем для себя функцию $. На 13 строке мы создаем канвас и получаем контекст из этого канваса. Далее для кнопки создаем обработчик и первое, что мы делаем это 17 строчка. Полностью очищаем канвас. Удаляем все, что на канвасе было нарисовано. Для того чтобы очистить канвас, мы используем метод clearrect, который мы уже видели. Смотрите как мы определяем размеры канваса, мы указываем context.canvas.width. Получаеся что в самом контексте есть ссылка на канвас, для которого этот контекст был создан. А у канваса есть ширина и есь высота, которую мы используем для того что бы точно определить размер области. 19-20 строчка, мы читаем значения из полей ввода х, у. Сохраняем текущие координаты, вызываем функцию translate, перемещяем контекст в новые координаты, указываем контекст, рисуем зеленый прямоугольник и восстанавливаем контекст. Если мы еще раз нажмем на кнопку с новыми координатами, то получается что сначала мы очистим то что было нарисовано, а потом нарисуем новый квадрат. Если мы не будем вызывать метод clearrect, смотрите какой эффект у нас получится.

Нарисовали квадрат в координатах 0 0. Потом в координате 100 100. У нас старый квадрат не удаляется. Канвас навсегда запоминает те значения, которые мы использовали для того что бы его нарисовать. Что бы перерисовать какую то информацию, нам нужно ее затереть, а потом уже работать дальше. Для того что бы затереть данные, мы используем clearrect. Следующая трансформация - scale, позволяющая поменять масштаб элемента. Посмотрите как у нас выглядит разметка. Точно так же идет канвас и точно так же идут несколько элементов ввода. Теперь эти элементы ввода будут использоваться для определения масштаба. Наше изображение с размерми 1х1, в своем исходном размере мы вывели картинку. Если мы напишем 2 2, то увеличим картинку в 2 раза. Если напишем 1 2, то картинка будет искаженная, потому что по оси у мы увеличили, по оси х оставили исходный размер. Вот работа трансформации scale. Давайте посмотрим, как эту трансформацию мы применили. Точно так же создали функцию, получили контекст. Строка 15, создаем изображение и указываем адрес изображения и указываем, что при загрузке изображения нам нужно вызвать функцию draw. Эту же функцию нам нужно вызвать, когда мы нажмем кнопку. Что у нас будет происходить при нажатии по кнопке. Мы вначале очищаем все что есть в канвасе, получаем значени которые ввел пользователь в текстбоксы. Строка 30, после сохранения контекста мы используем вызов метода scale с координатами. После этого вызова, все что мы нарисуем, будет с тем масштабом который был указан в методе scale. Но все настройки сбросятся на изначальные, когда мы вызовем restore. После restore, если мы еще раз нарисум изображение, то рисоваться оно будет со своими реальными параметрами, которые находятся в настройках. Следующая трнсформация - rotate, вращение. Для того что бы указать трансформацию вращения мы используем функцию rotate, на 30 строчке. Вызываем эту функцию и передаем угол вращения. Давайте посмотрим как будет работать эта функция. Изображение, мы хотим вращать его по часовой стрелке. Угол поворота ставим 45 градусов. Нажимаем на функцию и фот наше изображение повернулось на 45 градусов. Когда мы исползуем функцию rotate, то передавать угол поворота нам нужно не в градусах, а в радианах. Для того что бы расчитать радианы, мы используем вот такую формулу, 24 строка. Мы значение записываем в переменную angle, а потом в эту же переменную записываем новые значение angle*Pi/180. Уже это полученое значение можно использовать для вращения. Нужно обязательно записывать радианы, для того что бы функция rotate работала. У нас неочень красиво произошло вращение, картинка вылезла за канвас. Если вы хотите, что бы вращение происходило в другой области. Нам нужно перед самой функцией rotate, выполнить трансформацию translate. Возьмем контекст, вызовем translate и перенесем изображение где нибудь ближе к центру канваса. Если мы сейчас скажем, что хотим повернуть изображение на 180 градусов. Функция поворачивает его относительно координаты 0 0. Следующая трансформация - transform. Посмотрите как мы ее выполняем. Мы сейчас получаем уже большое количество значений. 6 аргументво нам необходимо, для того что бы выполнить трансформацию. На строке 36 мы вызываем на контексте transform и передаем все значения, которые были получены от пользователя. Для того что бы понять, как эти значения работают и что они означают, давайте перейдем в презентацию и посмотрим на слайд. У нас есть желтая пунктирная рамочка, это исходное наше озображение. Если мы будем указываеть значение переменной a, это значение будет определять масштаб по оси х. Каждое значение определяет, как мы буждем смещать исходную картинку. Посмотрите на то что получится. Если мы запустим пример, посмотрите масштаб 1. Если мы поставим масштаб 2, то просто увеличим изображение вдоль оси х. Искривление по у мы ставим 1. Видите, как картинка поменялась. Перемещение по х поставим 1, картинка немножко сдвинулась. Поставим масштаб 0.5, произошли изиенения. С помощью такой трансформации, мы можем достигнуть эффекта трехмерных манипуляций. Можем сделать так, что бы казалось что мы вращаем изображение вдоль определенной оси. Вот представьте, что мы хотим это изображение сделать в виде карт для изометрической игры. По какому то нарисованному полю, из квадратиков сделать плоскую карту, что бы она была трехмерной. Что бы по ней можно было расставить юнитов и заставить этих юнитов двигаться. Представьте, что это у нас карта. Для того что бы эту карту сделать изометрической, мы можем использовать метод transform с такими вот значениями. Если мы сейчас запустим пример, такое ощущение что картинка в трехмерном пространстве. На этом мы закончили пример с трансформациями и у нас осталось еще 2 простых примера, показывающих как в канвасе рисовать текст и определять тени. В 18 примере на канвасе изобразим текстовое содержимое. После получения контекста мы отображаем линию и далее на строке 14 определяем для контекста, каким шрифтом мы будем пользоваться и настройками цвета. По сути определение шрифта происходит так же как и в настройках css стиля. Мы указываем, что шрифт у нас будет жирным, указываем его размер и указываем сам шрифт, его имя. Далее на 15 строке мы указываем как шрифт будет у нас отображатся в канвасе. Где будет базовая линия, по которой будет шрифт вводится. Возможные значения вы можете посмотреть в презентации. Вот у нас несколько есть возможных линий, по которым будет определяться, гду будет начинаться вывод шрифта. Смотрите как будет работать этот параметр. Далее строка 17, мы определяем какой текст будем выводить, создаем переменную и записываем ее значение. Для того, что бы правильно спозиционировать текст в канвасе, нам неплохо было бы знать сколько пикселей занимает. Для того что бы получитьв пикселях размер текста, можем на контексте вызвать метод measuretext. Передать в качестве параметра строковое значение и получить значения ширина текста в пикселях. Теперь строка 19, для того что бы вывести текстовое содержимое на канвас, мы используем функцию filltext. Первым параметром мы указываем какой тексти мы будем выводить, а вторым параметром мы указываем где именно текст будет отображаться. Вот мы указываем что текст будет выводится посредине. Мы взяли ширину канваса и отняли ширину текста. Поделили все это на 2, что бы ровно по центру вывести текст. 98, это значение по оси у, отступ верхней части канваса где текст будет выводится.

Посмотрите на результат, вот наш текст отобразился. Если мы поменяем alphabetic на middle и еще раз запустим пример, то вы увидите что текст вывелся посредине линии. В 19 примере мы посмотрим как можно в канвас дбавить тень. Видите что 19 пример, это скопированный предидущий кода, единственное мы на строке 12 добавляем свойство shadowcolor. Указываем, какой цвет у нас будет для тени. Видите черный цвет с прозрачностью. Далее указываем отступ по оси х и у. Отступ относительно того элемента, который будет тень отбрасывать, того элемента который будет нарисован контекстом. И 15 строчка, мы указываем как эта тень будет размыта. Указываем значения, определяющие силу сглаживания краев. Когда мы контекстом будем создавать текст или рисовать другие элементы, эти элементы будут отбрасывать тень которая была настроена выше. Видите, текст который мы ввели, вот он оранжевым вывелся. За текстом есть тень. Суказанием отступа и указанием размытия. Давайте попобуем поставить значение размытия 10 и теперь тень у нас стала более мутной, более размазанной. Мы сейчас закончили первую папку. Рассмотрели основные операции, которые вы должны делать над канвасом. После прохождения этой части урока можете нарисовать простейшие примитивы, создать основные элементы растровой графики с помощью канваса. Теперь мы перейдем к второй части урока и рассмотрим несколько примеров использования канвас. В первом примере мы увидим, как с помощью канвас можно позволить пользователю рисовать на странице. Если мы будем водить мышью над поверхностью канваса, вы увидите что появляются очертания. Рисуется путь, по которому мы мышью провели. Как такой пример сделан в java script коде. Вначале давайте посмотрим как определен канвас. Видите, что на 43 строке созданный канвас ничем не отличается от обычного канваса. Обычние атрибуты, зато в текущем документе у нас есть java script код, который срабатывает на событие load, при этом на событие load мы запускаем функцию edit. Задача этой функции найти канвас, получить контекст для канваса и далее мы указываем, что для канвасе на событие mousemove, мы хотим запускать функцию mousemove handler. Событие mousemove будет неоднократно происходить, когда мышь двигается над поверхностью канваса. Вот мы событием mousemove handler будем проверять, где находится мышь и рисовать линию. Mousemove handler, сама функция обработчик определена на 19 строчке. Эта функция-обработчик принимает 1 аргумент. В этот аргумент будет попадать значение, которое передает нам браузер, обьект-событие. Как раз из этого обьекта мы будем вытаскивать информацию о изображении курсора в браузере.

Разные браузеры по разному именуют свойства, содержащие координаты курсора. По этому мы на строке делаем специальные условия, которые проверяют, какой именно браузер сейчас использует пользователь. Если в обьекте события e, находится свойство layer x, если такое свойство присутствует, это значит что пользователь зашел с браузера фаерфокс. На строке 24-25 мы заполняем значение свойств layer x layer y. Переменные х, у которые были созданы выше. Если это свойство не работает, то мы проверяем наличие свойства offset x. Если такое свойство существует инициализируем переменные. Потом, чтрока 31, если у нас переменная start не равна true, а изначально переманная false, то тогда мы указываем что начинаем путь. Указываем, что передвигаем позицию контекста на координаты х, у. Строка 34 указываем, что мы начали рисовать и переменной start присваиваем значение true. Получается, что в следующий раз, когда событие mousemovehandler будет происходить, у нас уже это условие не срабатывает, мы перепрыгиваем в блок else и начинаем рисовать линию к координате х,у. То есть мы от move to к line to начинаем рисовать много коротких линий, которые начинают получать очертания в канвасе. Получается, что у нас бесконечно рисуется линия. Мы даже не должны ничего нажимать, мы должны просто мышкой водить по поверхности канваса и это приведет к появлению очертаний, которые мы сделали курсором. В следующем примере мы посмотрим, как можно сделать такое же рисование, но только при нажатии на левую клавишу мыши. Видите, если мы мышью водим над поверхностью канваса, ничего не происходит. Когда мы зажимаем, то рисуем линию. Давайте смотреть, как это реализовано в следующем примере. Точно так же у нас есть канвас на странице. Точно так же мы вначале документа находим канвас, получаем контекст, но теперь у нас больше обработчиков. Мы создаем обработчик на движение мыши, обработчик на нажатие мыши и обработчик на событие mouse up, когда мы мышь отпускаем. Для того, что бы нам удобнее было работать в данной приложении, мы создаем функцию getCoords. Эта функция принимает обьект события и делая проверку, каким мы браузером пользуемся в итоге возвращает нам java script обьект, состоящий из 2-х свойств х и у. В этих свойствах у нас будут находится значения текущих координат мыши. Это вспомогательная функция, мы дальше будем ее использовать ниже в сценарии. Когда мы нажимаем левую клавишу мыши, на событии mouse down, у нас запускается функция обработчик downhandler. Эта функция у нас находится на 35 строке. Когда эта функция запускается, мы начинаем путь метод beginpath. Указываем, что перемещаем контекст на координаты по значению х и по свойству у. Мы вызываем здесь функцию, функция возвращает нам обьект с двумя свойствами и этот обьект мы используем. Берем значения нужных нам свойств. После этого мы указываем, что у нас началось рисование. Переменной start присваиваем значение true. Если переменной started присвоено значение true и мы начинаем мышью двигать по поверхности канваса, у нас запускается событие mousemove и срабатывает обработчим movehandler. В этом обработчике происходит то же самое, что и было в предидущем примере. Мы вызываем метод line to, передавая координаты мыши и вызываем метод stroke, для того что бы рисовать очертания. Если просто будет происходить событие mousemove, при этом клавиша не будет зажата, то тогда условие не срабатывает и движение мыши по поверхности канваса ни к чему не приводит. Если же мы после зажатия мыши отпускаем ее, то переменной started присваиваем значение false, это нужно для того что бы если значение было изменено на true, что бы потом мы могли остановить рисование. Вот такой небольшой пример, небольшие изменения, которые сделали наш мини web paint более похожим на настоящий pait. В следующем примере мы разберем интересную возможность, для сайта который базируется на основе канваса. Я думаю вы сталкивались с аякс приложениями. Видели, когда страница у вас начинает запрос к серверу, на странице появляется какое то вращающееся колесико, часики, которые указывают что в данный момент страница выполняет какую то обработку. Рисованиея во такого индикатора загрузки может быть сделано с помощью канваса. Вы можете использовать не стандартную gif анимацию, а канвас с какими то настройками. Посмотрите на то, как выглядит пример. Элемент который у нас показывает, что сейчас что то происходит. Этот элемент является обычным канвасом и с помощью специального java script обьекта у нас происходит рисование какой то анимации. Дополнительные примеры можно посмотреть вот по этой ссылке. Это сайт разработчика вот этого java script плагина. Видите сколько различных анимаций вы можете использовать. При этом вы можете создать свои анимации любого формата, цвета. Давайте кратко разберем, как работает этот плагин. Дополнительно, документацию по плагину вы можете посмотреть по второй ссылке. Простые моменты мы сейчас разберем. Строка 5, подключение этой библиотеки происходит по такому адресу. Можно скачать ее локально. Мы сейчас пользуемься библиотекой, которая доступна в вебе.

Далее стрoка 10, мы создаем переменную square, эту переменную мы инициализируем с помощью конструктора sonic. Эта функция как раз берется из библиотеки. Создавая эту функцию конструктор, мы передаем в нее обьект, состоящий из 4-х свойств. Высота и ширина элемента, который будет отрисован. Цвет заливки - белый и строка 17, свойство path где мы определяем массив элементов, указывающих как будет работать анимация. Мы указываем что у нас первая анимация, это линия которая из точки 10.10 напрявляется в точку 90.10. Когда эта линия будет отрисована, должна быть нарисованная вторая линия, которая с точки 90.10 рисуется в точку 90.90. Потом третяя линия, которая из этой точки идет в эту точку и четвертая линия. Мы указали из каких кусочков будет состоять наш loader. При этом вы можете в документации посмотреть другие возможные варианты. Здесь кроме линий можно рисовать арки, кривые. Можнос создать интересный путь по котором будет отрисовываться ваш лоадер. 25 строчка, мы вызываем функцию play, для того что бы loader начал отображаться и 24 строчка, добавляем его в текущий документ. Мы говорим что из этого обьекта мы извлекаем канвас. Этот канвас, как дочерний элемент у нас помещается в body. Нужно выделить отдельный элемент на странице, куда будет помещен канвас. Мы сейчас просто в body, как дочерний элемент добавили канвас. Последний пример, который мы разберем в уроке посвященному канвасу, пример показывающий как в канвасе создается анимация. Давайте мы запустим этот пример, что бы увидеть как у нас проигрывается. Анимация заключается в перемещении зеленого прямоугольника с левой стороны канваса в правую. Анимацию мы можем сделать различными функциями, но мы выбираем вот такой подход. Первое, что мы делаем. На стркое 25 мы определяем глобальную функцию requetsframe. Эта функция даст нам возможность независимо от браузера запросить выполнение отрисовки кадров анимации с наиболее подходящей частотой для текущего компьютера, на котором выполняется браузер. Когда мы вызываем функцию requestframe, эта функция делает вот такую сложную операцию. Создается переменная f и в эту переменную записывается window mostrewuestanimationframe. Если мы заходим с под браузера мазила, у нас эта функция будет присутствовать в обьекте window, мы ее запишем в переменную f. Если же этой функции нет, то мы будем использовать функцию requestanimationframe. Если этой функции не существует в браузере, мы будем использовать функцию webkitrequestanimatiomframe. Если же и этой функции нету, то тогда мы возьмем свою функцию, которая выполняет обычный вызов settimeout, передает в качестве параметра callback функцию и делает задержку на 500мс. Что выполняет каждая из этих функций. Впринципе все функции имеют одинаковое назначение. Ихняя задача попросить браузер, что бы при следующей адресовке, которую браузер планирует с определенной периодичностью, выполнить какой то наш участок кода. Когда мы хотим сделать анимацию, что бы анимация воспроизводилась максимально гладко и максимально подходила под производительность текущего компьютера, мы должны попросить у браузера, что ыб он планировал запуск анимации. Что бы сделать запуск анимации, допустим в мазила фаерфокс, мы должны выполнить такой вот кусочек кода. Вызвать функцию и сюда передать тот метод, который выполнится и адресовать новые кадры. По сути эта функция, которая лежит в качестве параметра, она у нас должна рисовать саму анимацию и мы должны с какой то периодичностю передавать функцию, которую браузер должен будет использовать для отрисовки новых кадров. Вот получается, что requestframe универсальная функция, позволяющая определить, каким мы пользуемся браузером и предоставить нам возможность, независимо от браузера, запланировать отрисовку нового кадра. Что у нас есть еще в этом примере, кроме функции запроса на отрисовку кадра. На строке 40 у нас есть функция drawrectangle, которая принимает обьект из свойствами и контекст. И пользуясь свойствами из обьекта, свойством х, у, width, heigth, рисует обычный прямоугольник. Задача этой функции, нарисовать прямоугольник с черной рамкой и зеленым контентом. Функция animate, эта функция будет самой важной в нашем примере. Потому что она будет заниматься анимацией. Перед тем как ее рассматривать, давайте посмотрим что находится за функцией animate. Первое 77, 78 строчка. Мы получаем ссылку на канвас, получаем контекст. Дальше настраиваем обьект rect, указываем необходимые параметры, координаты и строка 88, вызываем метод drawrectangle. Указываем обьект с настройками прямоугольника и указываем контекст. Чем этот прямоугольник нужно нарисовать на странице. Прямоугольник рисуется и дальше мы начинаем прямоугольник анимировать. Мы вызываем функцию animate, указываем изначальные настройки обьекта. Дальше мы указываем канвас, на котором произойдет анимация. Указываем контекст третим параметром и указываем время, когда анимация была запущена. Функция animate, вот она выше определена, принимает все аргументы. На строке 53 определяем разницу. Берем переменную time и определяем разницу между текущим временем, когда определяется эта строка и тем временем, которое было передано в качестве аргумента. Определили разницу, опеределяем скорость, с которой будет наша анимация выполнятся и 58 строчка, определяем новую координату х. В чем заключается наша анимация, мы прямоугольник перемещаем слева направо, меняем значение координаты х. Значение координаты х у нас постоянно меняется вот по такой формуле. Мы берем скорость воспроизведения анимации, умножаем на разницу времени запуска анимации и текущим временем и делим результат на 1000. Строка 61, мы проверяем если значения полученых переменных соответствуют длине канваса минус длине прямоугольника минус ширине прямоугольника, это значит что мы дошли до конца канваса. По этому мы можем сказать, что на 62 строке значение свойства х обьекта rect = newX. Получается newX постоянно меняется, увеличивается. Если мы не достигли определенного значения переменной, это значит что мы можем продолжать двигать прямоугольник слева направо. Движение прямоугольника мы обуславливаем этим изменением. Для того что бы перерисовать прямоугольник, на 66 строке мы удаляем содержимое, потом рисуем псрямоугольник с новыми координатами х и стркоа 72, мы просим что бы браузер запланировал запуск функции. Мы запускаем requestframe в качестве параметра. Мы передаем функцию, которую нужно запустить с тем интервалом, который посчитает правильным браузер. Передаем функцию, в которой вызывается animate, передаем animate с параметрами, которые были переданы. Первый раз мы запустили функцию самостоятельно, а потом когда эта функция выполнилась, она переместила прямоугольник вправо, а потом попросила браузер, что бы он запланировал запуск функции animate через какой то интервал времени. В завершении урока хочу сказать, что вы увидели как происходить работа с канвасом. Вы увидели как можно нарисовать линию, прямую, кривую, прямоугольник. Но все таки понимаете насколько сложно будет создать полноценное приложение, в котором на канвасе будут нарисованы интерактивные элементы, которые будут отслеживать какие то события мыши. Реагировать на эти события. Написать сложное приложение, используя чистый канвас и java script, будет очень тяжело. Вместо самописного java scripta вам так же придется применять некоторые библиотеки. Если вы откроете поисковик и в поисковике вбьете запрос javascript canvas frameworks, то вы попадете на вот такую страницу, где перечислены 10 основных фреймворков упрощающих работу с канвасом. Если погуглите, то найдете много различных библиотек, которые упрощают создание в канвасе интерактивных элементов, которые будут кликабельными, будут реагировать на вашы действия, будут выдавать какие то события.

Например колесо фортуны. Мы можеш захватить это колесо мышкой и захватить его. Перемещать так, как нам захочется. Если мы посмотрим на исходный код, то мы увидим что это действительно канвас, но просто с помощью java script библиотеки реализовано отслеживание движения мышки, взаимодействия с пользователем. Кроме того, что вы учите материал этого урока, попробуйте создавать примитивные элементы с помощью java script кода. Когда вы совоите элементарные вещи работы с канвасом. Рекомендую вам сконцетрировать свое внимание на каком нибудь из java script фреймворков. В чистом виде работать с канвасом будет тяжело. На этом урок, посвященный работой с канвасом мы заканчиваем. В доп. материалах вы найдете домашнее задание и описание к текущему уроку. Спасибо за внимание, до новых встреч.