문자열을 캔버스의 부동 소수점으로 변환하려고 할 때 JS 문제가 발생합니까?

그래서 최근에는 문자열을 텍스트 입력에서 부동/정수로 변환하여 문제의 애니메이션을 사용하려고했습니다. 어떤 아이디어? 현재 나는 parsFloat를 사용하려고 시도하지만, 그저 원을 모두 함께로드하는 것을 중단했습니다. 문자열을 수레로 변환하는 다른 방법이 있습니까? 감사!
문자열을 캔버스의 부동 소수점으로 변환하려고 할 때 JS 문제가 발생합니까?

function myFunction() { 

    var degrees = undefined; 
    var Rad = function degToRad(x) { 
     degrees = x/(180/Math.PI); 
     return degrees; 
    }; 

    var canvas = document.getElementById("canvas"), 
     c = canvas.getContext("2d"); 

    var posX = 55, posY = 100, gravity = parseFloat(document.getElementById("drag").value) * parseFloat(document.getElementById("gravity").value), vX = parseFloat(document.getElementById("xVel").value), vY = 0; 
    setInterval(function() { 

     c.fillStyle = "black"; 
     c.fillRect(0, 0, canvas.width, canvas.height); 

     c.beginPath(); 
     c.arc(posX, posY, parseFloat(document.getElementById("radius").value), 0, Rad(360), false); 
     c.fillStyle = "white"; 
     c.fill(); 

     posX+= vX; 
     posY+= vY; 

     if (posY > 800-parseFloat(document.getElementById("radius").value)) { 
      vY *= -document.getElementById("bounce").value; 
      posY = 800-parseFloat(document.getElementById("radius").value); 
      vX *= 0.9; 
     } 

     vY += gravity; 
    }, parseFloat(document.getElementById("framerate").value)); 

} 
</script> 

</head> 
<body> 
    <input id = "gravity" type="text" placeholder="gravity (m/s)"> 
    <input id = "xVel" type = "text" placeholder="x velocity (m/s)"> 
    <input id = "bounce" type = "text" placeholder="bounce (0-1)"> 
    <input id = "radius" type = "text" placeholder="sphere radius"> 
    <input id = "Mass" type = "text" placeholder="sphere mass"> 
    <input id = "density" type = "text" placeholder="fluid density"> 
    <input id = "framerate" type = "text" placeholder="framerate (ms/frame)"> 
    <input id = "drag" type = "text" placeholder="drage co. (sphere = 0.5)"> 
    <input id = "submit" type = "submit" onclick="myFunction()"> 
    <button type="submit" onclick="location.reload()">done</button> 
<canvas id = "canvas" width="5000" height="800"> 

</canvas> 
</body> 
</html>

출처

2016-09-19 A. Eglin

개발자 콘솔에서 오류를 확인 했습니까? – Pointy

값을 한 번만 구문 분석하고 구문 분석 된 값을 변수에 저장하는 것이 좋습니다. –

마치 여기에서 작동하는 것처럼 보입니다. https://jsfiddle.net/n1atr86d/ – Michelangelo

당신은 어떤 입력을 필터링하고 수의사한다.

다음 함수는 예제 일뿐입니다. 그것은 str을 조사하고, 제약 조건은 min과 max입니다. 숫자를 만들 수 없으면 주어진 값이 기본값이됩니다. 문자열에서 첫 번째 숫자를 찾습니다. 그것은 e (12E-10 9.245e34)

function vetNumber(str, defaultVal, min, max) { 
    if(min === undefined || min === null){ 
     min = -Infinity; 
    } 
    if(max === undefined || max === null){ 
     max = Infinity; 
    } 
    if(defaultVal === undefined || defaultVal === null){ 
     defaultVal = 1; // what the default defaultVal is is up to you. 
    } 
    if (typeof str === "string") { 
     // extract a number 
     // could have a leading - or . or -. 

     str = /(-??([0-9]+\.?|\.?)[0-9]+)/.exec(str); 
     if (str === null) { 
      return defaultVal; 
     } 
     str = Number(str[0]); // convert to a number; 
     return str < min ? min : str > max ? max : str; 
    } 
    if (typeof str === "number") { 
     return str < min ? min : str > max ? max : str; 
    } 
    return defaultVal; 
}

나는 또한 상수와 공식 허용하는 번호 수의사, 예를 들어 PI이 3.14... 및 1/3입니다 0.3333333 등이다를 사용하려면를 사용하여 숫자를 허용하지 않습니다 나는 발견했다 고객은 방해가되지 않는 한 이러한 기능을 좋아합니다.

출처

2016-09-19 22:32:07 Blindman67

문자열을 캔버스의 부동 소수점으로 변환하려고 할 때 JS 문제가 발생합니까?

답변

관련 문제