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

Question

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

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

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

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

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

1. После того, как цвет становится желтым, он останавливает анимацию.

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

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

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

Answer 1

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

ctx.restore; 

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

ctx.restore(); 

And here's the updated demo.

Answer 2

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