본문 바로가기

Etc/Html 5

으하하 Html5 공부를 시작했습니다.

아무래도 앞으로(사실 얼마나 걸릴지는 알 수도 없지만 =_=..) Html 5 을 이용해서 하이브리드 앱(특히 모바일)을 개발하게 될 것 같아서 미리 맛보는 Html 5  이제 시작합니다. 으하하하하

머 별로 공부는 안 했지만 공부 하는 데로 바로 공유(메모) 하려고 합니다.

그럼 이제 시작~ 뿅

그 첫 번째로 Canvas 위에서 사각형을 드래그 하는듯한 예제 입니다. (실제로 드래그를 하는 것이 아니라 계속 위치를 변경해서 새로 그려줍니다.)

우선 실행 화면은 다음과 같습니다. (테두리 안에서 마우스 클릭 후에 움직여봐주세용 :-D)

해당 브라우저는 Html 5 을 지원하지 않습니다
Opera에서는 작동이 되는 것을 확인 했습니다.

x : y :

코드는 다음과 같습니다.



머 별거 없습니다. 마우스 다운/무브/업 이벤트를 처리해서 현재 클릭 중이라면 무브시에 해당 위치에 사각형을 계속 그려주고 있습니다.

이건 Silverlight에서 객체를 drag/drop을 할 때 보통 사용하는 로직인데 머 여기서도 비슷하게는 되네용.

이건 그냥 Canvas에서 장난을 쳐본거구요. Html 5 에 새로 추가된건지는 모르겠지만 Draggable이던가? 하는 프로퍼티가 있어서 해당값을 true로 해주면 해당 객체가 이동을 하더라구요. 요건 다음에 한 번 알아 보도록 하겠습니다.

html5 참... 참.... -_-ㅋ