HTML5 Canvas - анимация цвета, масштаба и поворота

Question

Я новичок в холсте, так что извините за вопрос новичка. Я пытаюсь анимировать квадрат на холсте, который меняет цвета, вращается и масштабируется вверх и вниз (это просто для практики). Я просто пытаюсь понять все концепции и создать пример, который делает их все сразу.

То, что я хочу, это увеличить до определенной суммы, затем, как только она достигнет этой суммы, она уменьшится до начальной величины (а затем повторится). То же самое касается цвета (продолжите анимацию, затем вернитесь назад через цвета). Как мне это сделать?

Вот пример моего кода, который я написал:

http://jsfiddle.net/ggsFJ/1/

Вы заметите пару ошибок:

1. Как только цвет становится желтым, анимация прекращается.

2. Масштабирование, очевидно, не работает.

3. Поворот не достаточно быстро очищает холст или что-то в этом роде, потому что он показывает след.

Где я могу найти некоторые ресурсы для достижения этой цели? Любая помощь приветствуется.

Answer 1

Есть одна маленькая проблема, которая вызывает все другие проблемы (ну, кроме желтого - я не испытываю эту конкретную проблему):

ctx.restore;

Эта строка ничего не делает.Вам нужно позвонить ctx.restore, используя скобки.Как только вы это сделаете, масштабирование сработает, и clearRect() очистит нетрансформированный прямоугольник:

ctx.restore();

И вот обновленная демонстрация.

Answer 2

Проблема, которую я вижу, связана с вашим вызовом метода restore.Вы просто говорите ctx.restore (возможно, по ошибке).Это должно быть ctx.restore();