HTML5 캔버스를 사용하여 불규칙한 이미지 끌어서 놓기

Question

다음과 비슷한 HTML5로 애플리케이션을 작성하고 싶습니다.

HTML5 Canvas Animals on the Beach Game with KineticJS

그 데모의 문제는 비록 이벤트에 마우스가 동물을 둘러싼 사각형 만 정확하다. 더 정확하게 KinectJS 또는 다른 방법으로이를 수행 할 수있는 방법이 있습니까?

Answer 1

은 일반적으로 두 가지 방법이 있습니다 :

1. 후 사용 (수동으로 정의하는 것이) hitboxes 각 이미지에 사용자 지정 경로를 사용하여입니다 - 포인트 - 인 - 경로 알고리즘
2. 유령 캔버스를 사용하여 (또는 당신이 그것을 부르고 싶은 무엇이든지) this old tutorial에 상술했다. 새로운 튜토리얼에 대한 링크는 무시하고 이전 튜토리얼에서는 원하는 것을 사용합니다.

첫 번째 방법은 훨씬 빠르지 만 훨씬 많은 코드와 수작업이 필요합니다. 두 번째 방법은 픽셀 완벽하지만 훨씬 느립니다. 그래도 엄청난 양의 물건이 없다면 그것은 당신의 필요에 부합 할 것입니다.