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