Привет, котятки!
Разбираюсь с простой анимацией из учебников:
https://jsfiddle.net/3Leh8c1t/25/
Вроде и кода мало и есть описания всех методов, но никак не могу воткнуть, как они крутятся. Да и с тенью тоже ничерта не понятно.
На 17 строчке
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
Это заливка чёрным цветом с полупрозрачностью. Но я не пойму, почему эта заливка работает только на прямоугольник из 26 строчки?
ctx.fillRect(0, -12, 50, 24); // Shadow
Почему не происходит заливка всего канваса? Я не вижу никаких привязок.
ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
По идее создает рамочку, но я не вижу разницы, если закомментировать эту строку.
Кто с этим работает, как это вообще происходит? Есть цвет 0, 153, 255 - мне нужно открыть отдельную вкладку с сервисом rgb и вручную вбить эти цифры? Как-то попроще можно это делать? Или я вообще не с той стороны захожу? С отладкой тоже непонятно, я могу поставить точку останова в начале функции draw. Но пошаговый запуск ничего не показывает, после выхода из функции показывает сразу готовый результат. То есть мне для отладки нужно отвязаться от времени и в функцию ctx.rotate передавать какое-то фиксированное подобранное значение, вручную перезапускать скрипт, чтобы посмотреть покадрово, так что ли?
С орбитами планет поясните тоже, пожалуйста. Я не понимаю, почему Земля вертится по своей орбите, а Луна по своей, да еще и вокруг движущейся Земли? Я вижу строки:
ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
ctx.translate(105, 0);
ctx.drawImage(earth, -12, -12);
То есть логика работы такая: мы поворачиваем весь холст на какой-то определенный угол. После этого смещаем центр всего холста. Почему после? Мы ж уже повернули холст как нам нужно!
После того, как отрисовали землю, мы рисуем луну. И тут вообще непонятно. Земля же уже присутствует на холсте, то есть, аналогичные повороты и смещения центра должны работать и на неё тоже. Опять, но мы уже проделывали с ней действия и с самим холстом. Строчки 30 //ctx.save(); и 34 //ctx.restore(); в разделе с луной можно смело закомментировать, они не влияют на выполнение.
И самый главный вопрос, как до этого можно додуматься самому? Разобрать такой (очень простой) чужой код еще можно, но как до такого додуматься самостоятельно, я не понимаю? Быть может мой мозг уже старый и он думает как-то по другому, это просто не моё?
Прошу, разжуйте мне этот пример и расскажите, как устроен процесс разработки таких вещей?
