JS问题时，试图将字符串转换为浮动在画布上

JS issue when trying to convert strings to floats on a canvas?

本文关键字：转换 字符串 问题 JS      更新时间：2023-09-26

所以最近我一直有一个问题，试图将字符串从文本输入转换为浮点数/整数，以用于各种动画。什么好主意吗?目前我正试图使用parsFloat，但这只是停止了从一起加载的圆圈。还有其他方法将字符串转换为浮点数吗?谢谢!

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>

你应该过滤和审查任何输入。

下面的函数只是一个例子。它检查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等。我发现客户喜欢这样的功能，只要它不是侵入性的。

相关文章：