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

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

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

Первые шаги в анимации на 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, если это так обязательно поделитесь идеей. Возможно я реализую её и напишу про это следующую статью.