Добрый день. Я сейчас прохожу курс повышения квалификации - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?
|
Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 20702 / 2348 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Специальности: Программист, Разработчик интернет-проектов
Теги:
Практическая работа 10:
Canvas. Анимация
Аннотация: Целью занятия является знакомство с простейшей анимацией в canvas (холст).
Ключевые слова: кадр, U-кадры, функция, animated, R-квадрат, рекурсивный вызов, setTimeout, анимация
Следующие действия необходимо сделать чтобы нарисовать кадр.
- Отчистить холст. Самый простой способ сделать это состоит в методе clearRect.
- Сохранить состояние холста. Если вы меняете любые параметры (стили, преобразования и т.д.), которые влияют на состояние холста и хотите, чтобы исходное состояние использовалось каждый раз, когда кадр рисуется, необходимо его сохранить.
- Нарисовать анимированые фигуры. Фактически это шаг создания кадра.
- Востановление состояния холста. Если вы сохранили состояние холста, восстановите его, прежде чем делать новые кадры.
Рассмотрим два несложных примера по отображению анимированного изображения на холсте.
Пример 1
Для начала, просто изобразим движущийся квадрат. Функция createImage вызывается при загрузке тела HTML документа. В самой функции также определена доп. функция animation, которая, непосредственно, отрисовывает "кадры", рекурсивно, вызывая саму себя.
В рамках функции animation осуществляется следующая последовательность действий:
- Очистка холста.
- Отрисовка закрашенного квадрата.
- Изменение координаты левого верхнего угла квадрата по - горизонтали, для "смещения" квадрата на следующем шаге.
- В случае, если наш квадрат дойдет до края холста, то начальное значение координаты x вернется к нулю.
- Рекурсивный вызов animation, посредством метода setTimeout (см. http://javascript.ru/setTimeout).
function createImage() { var ctx = document.getElementById('lesson10').getContext('2d'); var x = 0; function animation() { ctx.clearRect(0,0, 1000, 1000); ctx.fillRect(x, 10, 10, 10); x = x+1; if (x > 999) { x = 0;} setTimeout(animation, 50); } animation();28.1.
Результат выполнения листинга 28.1 представлен на рисунках ( рис. 28.1, рис. 28.2, рис. 28.3)