Проблема JS при попытке конвертировать строки в поплавки на холсте?

Так что в последнее время у меня возникла проблема с преобразованием строк из текстовых входов в float/integers для использования в анимации. есть идеи? в настоящее время я пытаюсь использовать parsFloat, но это просто остановило круг от загрузки всех вместе. есть ли другие способы преобразования строк в float? благодаря!
Проблема 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 при попытке конвертировать строки в поплавки на холсте?

ответ

Смежные вопросы