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

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

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

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

3 canvas: рисование на холсте

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

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

3.1 Нанесение изображений при помощи родного API

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

Например

<html>

<head>

<script src="

https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

"</script>

</head>

<body>

var canvas = document.getElementById («myCanvas»);

var context = canvas.getContext («2d»);

//Заливка

context.fillStyle = «#5F5»;

context.fillRect (10,10, 300, 300);

//надпись

context.font = «50px serif»

context.fillStyle = «#FF0000»;

context.fillText («Hello People!», 30, 90);

//фиолетовый прямоугольник

context.fillStyle = «violet»;

context.fillRect (25,25,150,150);

context.strokeStyle = «gray»; // цвет линии

context.lineWidth = 6; // толщина линии

context.strokeRect (150,150,150,150); // прямоугольник

context.clearRect (100,100,150,150); // очищаем прямоугольную область

</script>

</body>

</html>

Пример

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

$ (functi

Бесплатный фрагмент закончился. Хотите читать дальше?

Пред.1 23

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

С этой книгой читают