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();