Canvas 'fps가 의도하지 않게 속도가 빨라 졌습니까?

온라인 튜토리얼에 기반한 캔버스 요소를 뒤범벅하고 다음 페이지 인 here을 생성했습니다. 여기 Canvas 'fps가 의도하지 않게 속도가 빨라 졌습니까?

내 마크 업입니다 :

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Canvas Game</title> 

     <link rel="stylesheet" href="style.css"> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
     <script src="script.js"></script> 
    </head> 
    <body> 
    <header> 
     <h1>Cool Canvas Bouncing Effect!</h1> 
     <p>Which would you like to see bounce around?</p> 
     <input id="beachBallButton" type="button" value="Beach Ball" /> 
     <input id="avatarButton" type="button" value="Avatar" /> 
    </header> 
    <br /> 
    <canvas id="myCanvas" width="600" height="400"> 
     Your browser does not support canvas! 
    </canvas> 
    </body> 
</html>

그리고 여기 내 자바 스크립트입니다 :

$(document).ready(function() { 

const FPS; 
var x = 0; 
var y = 0; 
var xDirection = 1; 
var yDirection = 1; 
var image = new Image(); 
image.src = null; 
var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 

$('#avatarButton').click(function() { 
    x = 0; 
    y = 0; 
    FPS = 30; 
    image.src = 'avatar.png'; 

    setInterval(draw, 1000/FPS); 

    function draw() { 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.fillRect(0,0,canvas.width,canvas.height); 
     ctx.drawImage(image, x, y); 

     x += 1 * xDirection; 
     y += 1 * yDirection; 

     if (x >= 500) 
     { 
      x = 500; 
      xDirection = -1; 
     } 
     else if (x <= 0) 
     { 
      x = 0; 
      xDirection = 1; 
     } 

     if (y >= 300) 
     { 
      y = 300; 
      yDirection = -1; 
     } 
     else if (y <= 0) 
     { 
      y = 0; 
      yDirection = 1; 
     } 
    } 
}); 

$('#beachBallButton').click(function() { 
    x = 0; 
    y = 0; 
    FPS = 60; 
    image.src = 'beachball.png'; 

    setInterval(draw, 1000/FPS); 

    function draw() { 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.fillRect(0,0,canvas.width,canvas.height); 
     ctx.drawImage(image, x, y); 

     x += 5 * xDirection; 
     y += 5 * yDirection; 

     if (x >= 450) 
     { 
      x = 450; 
      xDirection = -1; 
     } 
     else if (x <= 0) 
     { 
      x = 0; 
      xDirection = 1; 
     } 

     if (y >= 250) 
     { 
      y = 250; 
      yDirection = -1; 
     } 
     else if (y <= 0) 
     { 
      y = 0; 
      yDirection = 1; 
     } 
    } 
}); 

});

이제, 당신은 Avatar 버튼을 클릭 한 다음 나중에 Beach Ball 클릭 말의 FPS입니다 속도가 빨라 졌어. 그러나 두 함수의 click 함수 내에서 FPS 변수를 재설정했습니다. 또한 x 및 y 개의 변수를 재설정했습니다.

또한 동일한 버튼을 계속 클릭하면 속도가 크게 향상됩니다.

왜 이런 일이 발생했는지 설명해 줄 수 있습니까?

감사합니다.

출처

2011-02-15 Qcom

MMM ..... const FPS; < ---이게 뭐야?

내가 아는 한, 자바 스크립트에는 상수가 없다. 어쨌든 상수 인 경우 왜 나중에 값을 설정하려고합니까? 나는이 문장이 실패하고 FPS를 처음 설정할 때 전역 변수를 만들고 나중에이 전역 변수가 모든 함수에 의해 공유된다고 생각한다.

또한 clearInterval을 사용하지 않고 클릭 할 때마다 새 setInterval을 호출하므로 "beachBallButton"에서 세 번 클릭하면 세 개의 setIntervals 함수가 실행되고 각각 실행됩니다 코드. 이것은 "속도를 높이"원인이 될 수 있습니다.

출처

2011-02-15 07:57:09

와우, (취소 아무것도 없다 처음 참고). 튜토리얼 온라인에서이 문제를 수정하여 이전에는 문제가되지 않았습니다. xD Thanks! – Qcom

이 작동 예 =>

http://www.jsfiddle.net/steweb/sLpCA/ 다만 알레한드로 말한 일부 '추가'(즉 올) JS 없음 상수. 따라서 처음에 var FPS을 '선언'해야합니다.

또한 'intervalsID'변수를 설정해야합니다. 즉, 전화 할 때 setInterval이 반환하는 변수입니다. 하지만, 각 setInterval을 호출하기 전에, 당신은 당신이 전화 remove the 'active' interval actions 필요 나 자신이 일정한 변수를 할당하려고 놓칠 수있는 방법을

var myInterval; 
/* ... */ 
clearInterval(myInterval) 
myInterval = setInterval(draw,1000/FPS)

출처

2011-02-15 09:12:54 stecb

'setInterval'에 대한 명확한 설명을 해주셔서 정말 감사합니다! – Qcom

Np 친구, 그것이 도움이되었음을 기쁘게 생각합니다 :) – stecb

Canvas 'fps가 의도하지 않게 속도가 빨라 졌습니까?

답변

관련 문제