Интерактивная анимация HTML5. Методические указания. Михаил Ботов
Чтение книги онлайн.

Читать онлайн книгу Интерактивная анимация HTML5. Методические указания - Михаил Ботов страница 2

СКАЧАТЬ solid green;

      }

      </style>

      <script src="http://code.jquery.com/jquery-latest.min.js"></script>

      </head>

      <body>

      <button id=«go»> Полить </button>

      <div id=«block»> Газон </div>

      <script>

      // Произведем изменение нескольких css-величин в ходе одной анимации.

      $("#go").click (function () {

      $("#block").animate ({

      width: «70%», // ширина станет 70%

      opacity: 0.4, // прозрачность будет 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>

СКАЧАТЬ