밝을희 클태

미니맵에 도라에몽의 위치를 표시할 때 PNG를 사용해 scale을 줄이니 너무 작아져 화질이 깨지는 문제가 생겨서 직접 그리기로 했다.힘들다..useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); img.current.src = "/smallDo.png"; img.current.onload = () => { requestAnimationFrame(init); }; const drawCanvas = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); const PosX = posRef...

이전에도 requestAnimationFrame API를 사용하여 주사율을 동기화한 적이 있지만, 그 당시에는 시간을 측정해 렌더링 스케줄에 이벤트를 등록하지 않는 방식으로 진행했다. 이번에는 이전의 방식과 달리, 모든 이벤트를 렌더링 스케줄에 등록하되, 모든 주사율에서 속도를 일정하게 유지하고 싶었다. 이전 방식에서는 렌더링 스케줄에 이벤트를 등록하지 않다 보니, 높은 주사율을 가진 모니터에서도 60 FPS 애니메이션을 보게 되는 한계가 있었다. 이러한 문제를 해결하기 위해, 이번 구현에서는 각 프레임에서 걸린 시간을 기반으로 속도를 조정함으로써 다양한 주사율에서도 일관된 애니메이션 속도를 제공할 수 있도록 하였다.주사율 동기화 구현drawCanvas 함수 내에서 timestamp를 받아와 각 프레임 ..