HTML5 Canvas - 色、スケール、回転をアニメーション化する

Question

私はキャンバスを初めて使うので、初心者の質問を赦してください。私は色を変えるキャンバス上の四角形をアニメーション化しようとしています。回転し、上下にスケールします（これは練習用です）。私はすべてのコンセプトを把握し、すべてを一度に行うサンプルを作成しようとしています。私はそれが何をしたいのか

は、その金額に達すると、その後、それは開始量に戻ってスケールダウン（およびその後繰り返される）、一定量にスケールアップです。同じことが色のためになります（アニメーションを続けてから、色を逆向きに移動します）。どうすればこれを達成できますか？

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

あなたはカップルのバグに気付くでしょう：：色が黄色になる

1. たら、それはアニメーションを停止し

   は、ここで私が書いた私のコードの例です。

2. スケーリングは明らかに機能しません。それは位置の跡を見せているため

3. 回転はどちらか、十分に速くキャンバスをクリアするか何かされていません。

これを達成するためのリソースはありますか。どんな助けもありがとうございます。

Answer 1

他のすべての問題を引き起こしている一つの小さな問題があります（まあ、別に黄色から - 私は特定の1つを経験していないよ）：

ctx.restore; 

は、その行が何もしません。かっこを使用してctx.restoreに電話する必要があります。あなたはスケーリングが働き、clearRect()は、非形質転換長方形をクリアしますが、それを行うたら：私は見ることができます

ctx.restore(); 

And here's the updated demo.

Answer 2

問題は、あなたのrestoreメソッド呼び出しです。 あなたはちょうどctx.restore（恐らく間違って）と言っています。それがありますctx.restore();