Интерактивная анимация HTML5. Методические указания - страница 3

Задание «Скачущий мяч»

1) Сделать анимацию прыгающего мяча. Мяч начинает движение от верхней границы окна браузера, летит вниз, по достижении определенного уровня (пролететь должен не менее полэкрана) изменяет направление движения на противоположное – летит вверх. По достижении верхней границы окна – снова изменяет направление и летит вниз. И так в бесконечном цикле.

В точках разворота мяч должен немного сжиматься по вертикали.

2). По клику на мяч в точке экрана, на которой был совершен клик появляется текст, например, «Гол!», который уходит вправо, постепенно исчезая.

Элемент разметки для текста создается по клику, смещается вправо с изменением прозрачности и удаляется по достижении правого края экрана

Canvas – это HTML элемент, предназначенный для создания растровых изображений посредством javascript.

Важно отметить, что сам элемент canvas явлется частью DOM-модели документа, но все, что на нем изображается (фигуры, надписи) остается внутри него и в DOM не встраивается.

Canvas вставляется в разметку как и любой другой тег HTML. Работа с его содержимым осуществляется при помощи javascript.

Например:

Пример градиентной заливки