Интерактивная анимация HTML5. Методические указания. Михаил Ботов
будет 40%
marginLeft: «0.6in», // отступ от левого края станет равным 6 дюймам
fontSize: «3em», // размер шрифта увеличится в 3 раза
borderWidth: «10px» // толщина рамки станет 10 пикселей
}, 1000); // анимация будет происходить 1 секунду
});
</script>
</body>
</html>
Задание «Скачущий мяч»
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>
<canvas id=«myCanvas» width=600px height=600px> … </canvas>
<script>
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>
Пример градиентной заливки
<script>
$ (function () {
var canvas = document.getElementById («myCanvas»);
var context = canvas.getContext («2d»);
//Линейный градиент
context.fillStyle = «#000000»;
var gradient = context.createLinearGradient (5,45,150,150);
gradient.addColorStop (0.0,«#00FF00»);
gradient.addColorStop (0.471428571, «#FF0000»);
gradient.addColorStop (1.0,«#0000FF»);
context.fillStyle = gradient;
context.fillRect (25,25,150,150);
//Радиальный градиент
var rad_grad = context.createRadialGradient (250,250,1, 150,250,120);
rad_grad.addColorStop (0,«#F00»);
rad_grad.addColorStop (0.5,«#0F0»);
rad_grad.addColorStop (1,«#00F»);
context.fillStyle = rad_grad;
context.fillRect (150,150,200,200);
});
</script>
Пример отрисовки фигуры «звезда»
//star
context.strokeStyle = «red»;
context.lineWidth = 10;
context.beginPath ();
context.moveTo (50,100);
context.lineTo (240,100);
context.lineTo (70,230);
context.lineTo (140,30);
context.lineTo (220,230);
context.closePath ();
context.stroke ();
Пример