2011-12-28 5 views
7

Canvas를 사용하여 게임을 만들려고 시도하는 동안 태블릿/휴대 전화 브라우저에서 몇 가지 단점을 발견했습니다.iPad/Android 태블릿의 HTML5 Canvas (게임)

1) 캔버스를 선택하지 못하게하려면 어떻게해야합니까? 사용자가 터치 할 때 캔버스를 강조 표시하고 거의 선택하려고하는 것처럼 보입니다. 이것은 바람직하지 않습니다.

2) 브라우저 슬라이드 제스처. 일부 브라우저에는 캔버스 또는 웹 페이지에서 수행 된 모든 움직임을 무효화하는 슬라이드 제스처가 있습니다. 이것은 매우 귀찮고 바람직하지 않습니다.

3) HTML UI 요소를 사용한 캔버스 제어. 동료 UI 요소 (예 : 텍스트)가있는 캔버스가 캔버스에서 클릭되거나 드래그되는 경우 HTML의 일부가 강조 표시되고 대신 캔버스를 치는 대신 HTML 요소가 드래그됩니다.

도움을 주시면 대단히 감사하겠습니다. 나는 HTML5가 데스크톱뿐만 아니라 모바일에서도 좋은 호환성을 제공 할만큼 충분히 성숙해 지길 바랬다. 아이디어는 한 번 코딩하고 모든 곳에서 놀 수 있습니다 .... 감사합니다!

답변

4

이 # 1과 # 3에 관한 당신의 문제를 해결해야합니다 2가 무섭게 별도의 질문처럼 보인다

canvas.addEventListener('selectstart', function(e) { e.preventDefault(); return false; }, false); 

#,하지만 난 슬라이드 제스처 내 캔버스 물건 중 하나를 오버라이드 (override)에 문제가 없었습니다 . 터치 이벤트가 시작될 때 e.preventDefault();을 사용해보세요.

+0

정말 대단합니다. 이 작동합니다. 나는 인터넷 검색을 시도하고 제 3 자 라이브러리를 보았고이 한 줄의 코드를 찾을 수 없었다. 바라건대 그것은 다른 사람들에게 도움이되기를 바랍니다. – Adam

+0

나는 이것을 시험해 보았지만, 안드로이드에서는 아무것도 바뀌지 않았다. 캔버스 어디에서나 두드리는 것은 여전히 ​​모든 것을 선택했다. – Cbas