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