본문 바로가기

개발공부/JavaScript2

(JavaScript) 캔버스에 이미지가 안그려지던 문제 공유되는 캔버스 그림을 구현하던 도중, 새로 들어온 유저가 현재 그려지고 있는 그림을 가져와야 하는 상황이 생겼다. 그림을 가져오려면, 1. 현재 그려지고 있던 그림 정보를 저장하고, 2. 그림 정보를 서버로 보낸 후, 3. 새로 들어온 유저에게 그림 정보를 넘겨준다. 4. 해당 유저는 입장고 동시에 받은 그림 정보를 자신의 캔버스에 써서 그림을 복사(?) 해준다. 이렇게 진행을 하고 있었다. 3번까지는 문제없이 진행되었지만, 아니 심지어 4번에서 유저가 그림 정보까지 가지고 있다는 것을 확인을 했는데.. image 객체를 만들고, 이미지 정보(src)를 셋팅하고, 그리기를 실행하면 -> 그려지지가 않는다,,!(왜!도덕책!왜!) 그래서.. setInterval 로 시간을 좀 준 뒤에 하니까 되더라.. 잉.. 2020. 2. 7.
(JavaScript) MouseEvent 위치값 비교 1. offsetX / offsetY : 해당 객체 안에서의 위치값 : 해당되는 '객체' 안에서의 좌표값을 나타낸다. 어떤 div가 있고, 마우스이벤트가 이 div에서 발생된것이라면그 div 안에서의 좌표를 나타낸다. 2. screenX / screenY : 모니터 기준의 위치값 : 현재 사용자의 '모니터' 기준으로 표시되는 좌표값이다. 그래서 브라우저를 닫거나 열거나, 브라우저를 줄이거나 늘리거나 해도 상관없이 모니터 기준의 좌표값을 나타낸다. 3. clientX / clientY : 브라우저 기준의 위치값 : 현재 사용자의 '브라우저' 기준으로 표시되는 좌표값이다. 현재 마우스가 브라우저의 어느 위치에 존재하는가를 나타낸다. 4. page X / page Y : 문서 기준의 위치값 : 현재 보고 있는.. 2020. 1. 20.