프론트엔드 첫걸음

문제상황텍스트 크기에 맞춰 캔버스 사이즈를 바꾸는 예제에서 measureText를 사용해 canvas.width를 바꿔준 후에 font에 관한 설정이 사라지는 것을 발견 FONT_SIZE = Math.floor(innerWidth * 0.15) ctx.font = FONT_SIZE + 'px Creepster, cursive' canvas.width = ctx.measureText(TEXT).width canvas.height = FONT_SIZE  해결https://stackoverflow.com/questions/65602038/cannot-set-canvas-width-and-change-font-at-the-same-time캔버스 크기를 변경하면 컨텍스트도 재설정되기 때문에 font siz..

requestAnimationFrame 효율적으로 사용하기 requestAnimationFrame 함수를 animate함수 안에서 실행시키면 현재 모니터의 주사율 기반으로 모니터마다 animate 실행수 다르다. 60Hz 주사율 ->requestAnimationFrame는 1초에 60번 실행 => 주사율에 따라 1초에 움직이는 횟수가 다를 수 있다 내 코드가 컴퓨터의 주사율에 상관없이 동일한 속도로 이동하는 결과를 보여주려면? FPS(Frame Per Second) : 1초에 requestAnimationFrame 몇번 실행시킬까 ? 모니터마다 동일한 시각에 동일한 동작 실행되게 하려면? 전제 내 모니터 주사율이 60Hz라면 1초에 60번 실행한다 => 약 0.0016초에 1번 실행된다 (1request..

이쯤되면 외울때도 됐는데.. 캔버스 기본적으로 width 300, height 150 설정되어있다. 이것이 css로 조절되는 것이다. canvas 자체의 width, height를 css width와 height에 맞춰 확대 or 축소되는 것.. ex1. 캔버스 길이 놔두고 css길이만 수정 -> 컨텍스트에 그린 것이 height 비에 맞춰 수정됨 canvas.style.width = 300 + "px"; canvas.style.height = 300 + "px"; //canvas height 150-> 300 강제로 2배 늘림 ctx.fillRect(10, 10, 50, 50); // => 세로로 2배 긴 사각형됨 ex2. 컨텍스트에 그린것이 왜곡되지 않도록 캔버스 기본길이 수정 canvas.style..