책보고 HTML5 + javascript로 새총
발사 따라하기.
정작 코딩보다 웹페이지에 띄웠을 때 HTML5 캔버스가 제대로 뜨지 않는 문제 해결에 대부분의 시간을
보내다.
위 새총 발사의 경우 마우스로 공을 클릭해서 잡아 당겼다 놔야 하는데 웹페이지의
전체 table안에 넣어 두면 마우스 클릭을 인식 못하는 문제가 발생해 할 수 없이 전체 테이블 밖에
놓을 수 밖에 없었다. 아마도 마우스 이벤트의 경우 페이지의 절대위치를 사용하는 듯하여 그런 듯 하다.
(아래 수정 내용대로 이 부분은 CSS에서 canvas의 position 속성을 relative로
설정하는 것으로 해결했다.)
HTML5가 아직 발전단계라서인지 표준화가 안되서인지 불안정한 미지수가 많은
듯 보인다.
13/03/18 월
14/08/26 화 수정:
* 재시작을 눌러도 공이 원래 상태로 돌아오지 않는 버그가 있었는데 고쳤다. "코드상으로는
문제가 없고 단일 상태에서는 제대로 작동되어 뭐가 문제인지 모르는 상태. --;" 라고 당시
써놨었는데 사실 코드상에 문제가 있었다. --; restart() 함수에서 init() 함수를 호출하지
않고 단순히 drawAll() 함수만 호출하니 해결되다.
* 마우스 좌표가 웹 페이지의 절대좌표로 인식하는 바람에 캔버스를 원하는 곳에 위치시키지 못하는 문제를
풀었다.
CSS에서 canvas요소에
canvas{ position: relative; }
이런식으로 relative로 설정해주면 해결되는 문제였다. |