HTML 캔버스/자바 스크립트의 FPS 잠금

Question

HTML 웹 사이트에서 만든 스프라이트 시트로 프레임 애니메이션으로 프레임을 만들려고했는데 애니메이션을위한 fps를 고정하는 방법을 알 수 없었습니다. 문제는 항상 번개 속도로 가고 있으며 ~ 10-15fps로 잠글 수 있기를 원합니다. Date.now() 메서드와 setInterval 메서드를 사용해 보았지만 그럴 것 같지 않습니다. 당분간 일하고 있습니다.

이 애니메이션을 사용하는 방식은 배열을 검사하여 내가 만든 4 프레임 애니메이션에 애니메이션을 적용해야하는지 확인하는 것입니다. 다음은 내가 사용 해본 코드입니다.

function animateCharacter() { 
    var canvas = document.getElementById("portrait"); 
    var context = canvas.getContext("2d"); 
    var character = new Image(); 
    character.src = "/assets/spritesheet.jpg"; 
    animate(); 
    function animate() { 

     context.drawImage(character, shift, 0, width, height, 300, 0, width/2, height/2); 

     if (currentFrame == totalFrames) { 
      shift = 0; 
      currentFrame = 0; 
     } 
     requestAnimationFrame(animate); 

} 

Answer 1

당신의 setTimeout을 시도 할 수

function animate(){ 
// do your animation 
//  workout your frame rate 
    setTimeout(animate, 500); 
}; 
animate(); 

Answer 2

이이 문제를 해결하기 위해 여러 가지 방법이 있지만, 일반적인 생각은 당신이 당신의 영국 공군 콜백에있어 한 HighResTimeStamp을 확인하고 따라 값을 업데이트하는 것입니다 그것에. 여기

는 적어도 하나의 프레임이 지난 경우에만 업데이트됩니다, 그리고 update 함수에 TIME_DELTA을 전달합니다 더미 구현, 그래서 그것의 속도 값을 확장하는 방법을 많이으로 알고있다. 이것은 우리가이 TIME_DELTA 값을 반올림 한 수, 단지 할 수있는 많은 구현 중 하나입니다, 및/또는 심지어

const ctx = c.getContext('2d'); 
 

 
// we need to know when the last frame did trigger 
 
let lastTick = performance.now(); 
 
function anim(time){ 
 
    const time_spent = time - lastTick, 
 
    passed_frames = time_spent/(1000/FPS.value); 
 
    if(passed_frames >= 1){ 
 
    update(passed_frames); 
 
    lastTick = time; 
 
    draw(); 
 
    } 
 
    requestAnimationFrame(anim); 
 
} 
 

 
let x = 0; 
 
const speed = 5; 
 
function update(time_delta){ 
 
    x = (x + (speed * time_delta)) % (c.width - 10); 
 
} 
 
function draw(){ 
 
    ctx.clearRect(0,0,c.width,c.height); 
 
    ctx.fillRect(x, 50, 20, 20); 
 
} 
 

 
anim(performance.now());

<label>FPS: 1<input id="FPS" type="range" min="1" max="120">120</label><br> 
 
<canvas id="c"></canvas>

주, for 루프에서 update를 실행 또는 ...