나는 작은 선을 따라 움직이는 수백 개의 작은 원을 움직이기 위해 운동 j를 사용하는 작은 html 캔버스 응용 프로그램이 있습니다. 괜찮아 보이지만 때로는 조금 느려질 수도 있습니다. 몇 천 가지로 확장하고 각 프레임의 각 원을 업데이트 할 수 있기를 바랍니다. 어떻게하면 더 빨리 만들 수 있습니까? 이 목적을 위해 동역학 js에 대한 더 나은 대안이 있습니까? 감사. 당신은 사용자가 주자 서클과 상호 작용 필요하지 않을 http://www.cs.middlebury.edu/~gkrathwohl/running/ncaa.html많은 개체가있는 동적 js 속도
:
여기 샘플입니다.
Kinetic.Circles에서 제공하는 대화 형 기능이 필요 없기 때문에 수천 (수천) 개의 개별 Kinetic.Circles를 만드는 대신 모든 단일 주자를 하나의 단일 Kinetic.Shape로 그려서 속도 향상 정도를 얻을 수 있습니다.
Kinetic.Shape는 네이티브 context.arc (x, y, radius, 0, PI2)를 사용하여 비대화 형 원을 훨씬 빠르게 그릴 수있는 컨텍스트를 제공합니다.
나중에 상호 작용이 필요한 경우 마우스 위치와 각 러너 개체를 수학적으로 빠르게 테스트 할 수 있습니다.
프로젝트가 성공적으로 완료되었습니다.
고마워요! 그게 내가 찾고 있던거야. 아직도 관심이있는 사람들에게, 나는 많은 방향으로 많은 점들을 펼칠 수있는 작은 바이올린을 만들었습니다. http://jsfiddle.net/QmbB9/ 나는 그들을 같은 키네틱으로 모두 만들려고 노력할 것이다. 지금 형태. – user2280271
실제로 이것에 대해 좀 더 자세히 설명해 주시겠습니까? 상호 작용이 필요하지 않지만 각자 자신의 길을 따라 가려면 각 원이 필요합니다. 간단한 피 드의 예가 있습니다 : http://jsfiddle.net/QmbB9/. 실제 프로젝트에서 각 kinetic.circle은 다음 경로와 속도를 추적합니다. – user2280271
알았어요. 따라서 서클은 더 이상 객체가 아닙니다. 애니메이션에서 (setDrawFunc를 사용하여) 해당하는 러너 객체를 기반으로 모든 원을 완전히 다시 그립니다. 이것은 수천까지 꽤 매끄럽게 만듭니다. 아마 10 만원을 요구하면 너무 많아요. – user2280271
해당 페이지에서 무슨 일이 일어 났는지 알 수 없습니다. 스크립트는 어떻게 든 난독 화가 된 것 같습니다. jsfiddle을 게시 할 수 있습니까? 나의 초기 질문은 당신이 당신의 메인 게임 루프를 어떻게하고 있는지입니다. 나의 초기 실수 중 하나는 주 루프의 마지막 실행 이후 경과 한 시간의 양이 아니라 프레임 율에 기반한 움직임을 허용하는 것이 었습니다. – azurelogic