Да вертел я всё на HTML5!

На днях, наткнулся на очередную игру, написанную, с использованием HTML5 и решил я немного изучить сие чудо прогресса. Сегодня мы будем играться с канвой, крутить и вертеть всё, что в голову придёт. Признаюсь, после прочтения мануалов на эту тему, мне стало страшно, возможности которые привносит HTML5 в современный web дизайн, просто огромны. А соответственно изучать их все долго и сложно, но одновременно с этим это необходимо, чтобы не отставать от остальных.

html5 уроки анимации

Начнём с простого. Первое что сделаем — заставим двигаться маленький квадратик по прямой. Ну а затем будем вертеть что-нибудь круглое и интересное.

Первые шаги в анимации на HTML5

Вся суть в анимации на HTML5 заключается в трёх действиях:

  • Рисование
  • Обновление
  • Очистка

Сама механика работы с канвой мне напомнила Delphi, может, кому покажется, что это не так, но я вертел то, что вам там кажется. Итак, берём квадратик, рисуем его, обновляем, стираем и снова рисуем. Поехали!

$(function() {
var canvas = $('#canvasElement');
var context = canvas.get(0).getContext('2d');
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
var x = 10;
var y = 10;
function moveBox() {
// Очищаем наш холст для перерисовки
context.clearRect(0,0, canvasWidth, canvasHeight);
// Рисуем наш квадратик
context.fillRect(x, y, 10, 10);
// Увеличиваем x при каждом обращении к этой функции на еденицу
// Тем самым заставляем двигаться квадрат по прямой
x++;
// В цикле каждые 33 миллисекунды вызываем moveBox()
setTimeout(moveBox, 33);
}
// Старт
moveBox();
}); 

Ну а вот и наш чёрненький квадратик:

Кручу, верчу — обмануть хочу!

У меня сейчас за окном жуткая гроза и по этому, самое время повертеть что-то по серьёзнее. Например, какой-нибудь кружочек. Да хоть прям вот этот:

И вы не поверите, но он уже крутится! Но, что бы это было видно всяким врединам, которые не верят что этот круг вращается, придётся нарисовать стрелочки, показывающие, как вращается наш кружочек.

Меньше слов больше дела, будем использовать три метода.

  • Save();
  • Restore();
  • Translate();

Метод Translate() переносит координаты стрелок при перевороте холста, это самая главная задача. Ну а остальное думаю понятно, рисуем поворачиваем и так далее.

topArrowX = tmpService.x + ((tmpService.radius + tmpService.hoverInnerRadius) * Math.cos(tmpService.arrowAngle*(Math.PI/180)));
topArrowY = tmpService.y + ((tmpService.radius + tmpService.hoverInnerRadius) * Math.sin(tmpService.arrowAngle*(Math.PI/180)));

context.save();
context.translate(topArrowX, topArrowY);
context.rotate(tmpService.arrowRotation*(Math.PI/180));
drawArrow(0, 0);
context.restore();

bottomArrowX = tmpService.x + ((tmpService.radius + tmpService.hoverInnerRadius) * Math.cos((tmpService.arrowAngle + 180)*(Math.PI/180)));
bottomArrowY = tmpService.y + ((tmpService.radius + tmpService.hoverInnerRadius) * Math.sin((tmpService.arrowAngle + 180)*(Math.PI/180)));
context.save();
context.translate(bottomArrowX, bottomArrowY);
context.rotate((tmpService.arrowRotation + 180)*(Math.PI/180));
drawArrow(0, 0);
context.restore();

Смотрите-ка, а он и вправду движется

Вот такой вот кружочек, спасибо что зашли в мой маленький бложек и прочитали этот скромненький пост про анимацию в HTML5. Если вам понравилось, напишите об этом в комментариях и я обязательно напишу на эту тему ещё пару постов.

Кстати, возможно вам давно хотелось сделать какую либо няшную штуку на HTML5, если это так обязательно поделитесь идеей. Возможно я реализую её и напишу про это следующую статью.

Комментарии моих читателей

  1. VSCher сказал:

    Неплохо, спасибо за статью, как всегда интересно.

  2. Vital' сказал:

    Весьма познавательно. Спасибо за статью.

  3. Олег сказал:

    Очень интересно, спасибо )

  4. Silence сказал:

    Пешы есчо!

  5. Андрей сказал:

    теперь было бы здорово увидеть урок который учит вставлять эти элименты в html страницу

  6. Ar1roN сказал:

    Пиши еще:) Канва это круто)

  7. Ольга сказал:

    Врете вы все!

    Пишете «Первые шаги» и не пишите КУДА надо прописывать приведенные в примерах скрипты.

  8. danik сказал:

    А как можно заставить, например переворачиваться игральную карту. Карта изначально ввиде png-изображения. Можно ли ее «перевернуть» сымитировав 3-d эффект?

  9. (моё имя тут) сказал:

    А в чём, собственно разница между этим и жаваскриптом?

  10. Анастасия сказал:

    Добрый день! замечательная статья. по поводу идеи для написания статьи. у меня есть сайт, в его стилистике присутствуют разноцветные квадраты. и я вот подумала-как было бы здорово если бы при открытии некоторых статей фон засыпали эти самые квадраты. на подобие тетриса-засыпали футер и остановились. получилось бы простенько и со вкусом. может быть вы бы могли помочь мне с реализацией этой идеи? skype- sonia_black

  11. oleg сказал:

    первый пример, там квадратик заново не появляется у меня код тот же скопировал и вставил

  12. symbat сказал:

    a kak napisat` kod, 4toby dvigalsya text.?

Прокомментируй, пожалуйста, мою заметку.