2012-11-06 8 views
1

자바 스크립트를 사용하여 적절한 HTML5 애니메이션을 수행하고 애니메이션 프레임을 요청하는 방법에 대한 자습서가 많이 있습니다. 데모에서도 애니메이션 이미지가 다시 그려지는 것처럼 보일 수 있습니다. 둘째. 그러나 나는 마이크로 소프트 같은 게임이이 문제를 해결 한 것으로 보이는 밧줄을 자른 버젼을 포팅 한 것을 본다. 누구나이 캔버스 효과를 덜 드러내는 방법을 알고 있습니까?HTML5 Canvas 고스트 애니메이션 문제?

+0

좀 더 구체적으로 말씀해 주시겠습니까? 예를 들다? – Shmiddty

답변

1

이전 이미지를 삭제하기 전에 새 이미지가 다시 그려지는 것이 문제라고 생각합니다. 캔버스가 지워졌는지, 아니면 적어도 이미지가 다시 그려지는 영역인지 확인하는 것이 좋습니다. 캔버스의 특정 부분을 지우고 특정 크기 (약 800x600)까지 전체 캔버스를 지우는 실험을 해봤지만 전체 캔버스를 지우는 것이 빨라졌습니다.

내 (진행) 게임 캔버스를 사용 http://www.dacheng.me/dBoom

은 JS 소스 코드를 찾아 주시기 바랍니다!

+0

어떤 방법으로 전체 캔버스를 비우셨습니까? –

+0

context.clearRect (0, 0, canvas.width, canvas.height); – Dacheng

+0

나는 내 코드에서도 그렇게 해왔다. 나는 그것이 내 새로 고침 속도 문제를 일으키는 내 맥 프로에서 실행되는 내 창을 확인하려고합니다. –

0

나는 당신이 찾고있는 것은 윈도우 버퍼링 생각 :

http://en.wikipedia.org/wiki/Multiple_buffering

기본적 아이디어는 당신이 전환하는 있도록 완벽하게 그려 후 교환하는 두 개의 서로 다른 창/캔버스 요소를 사용하는 것입니다 완전히 그려진 "프레임"사이. 이 기술은 OpenGL과 오늘날 존재하는 거의 모든 다른 합법적 인 그래픽 프로그램에서 사용됩니다.

+0

많은 사람들이이 아이디어와 함께 요구 프레임을 섞어 보았습니다. 나는 IE가 IE에서 webgl isnt로 보는 것을 어떻게 성취했는지 궁금합니다. –

+0

webgl을 사용하는 것을 암시하지 않고, 단지 여러분이 말한 것으로부터 버퍼링이라는 개념을 전송하는 것은'requestanimation' 프레임으로 이미 완료되었을 것입니다. 확실하지 않다. – TMan

+1

나는 이걸 없애기 위해 어떤 단계를 취할 수 있을지 궁금해하고있다. –