Javascript 生成随机图坐标_Javascript_Graph

Javascript 生成随机图坐标

javascript graph

Javascript 生成随机图坐标,javascript,graph,Javascript,Graph,下面的代码将在图形（画布）上生成两个随机点，这两个点可以用一条线连接 <script> function random() { var point1X = (Math.floor(Math.random() * 10) + 1); var point1Y = (Math.floor(Math.random() * 2) - 10); // first two lines generate first coordinate on graph var point2X = (Math.fl

下面的代码将在图形（画布）上生成两个随机点，这两个点可以用一条线连接

<script>
function random() {
var point1X = (Math.floor(Math.random() * 10) + 1);
var point1Y = (Math.floor(Math.random() * 2) - 10); // first two lines generate first coordinate on graph
var point2X = (Math.floor(Math.random() * 100) + 10);
var point2Y = (Math.floor(Math.random() * 2) - 10); // second two lines generate second point

document.getElementById("empty").innerHTML += "(" + point1X + ", " + point1Y + ") (" +      point2X + ", " + point2Y + ")<br />"; // here coordinates are displayed on the page.
}
</script>


函数随机（）{
var point1X=（Math.floor（Math.random（）*10）+1）；
var point1Y=（Math.floor（Math.random（）*2）-10）；//前两行生成图形上的第一个坐标
var point2X=（Math.floor（Math.random（）*100）+10）；
var point2Y=（Math.floor（Math.random（）*2）-10）；//第二行生成第二个点
document.getElementById（“空”）.innerHTML+=”（“+point1X+”，“+point1Y+”（+point2X+”，“+point2Y+”）”）；//此处坐标显示在页面上。
}

我希望生成的第二个坐标与生成的第三个坐标相等，因为所有坐标都应该使用线连接（但是生成的第四个坐标应该不同）

我发现这很难解释，所以希望这个图表能有所帮助：

如果有人能解释清楚，我会编辑它。

就像Paulpro建议的那样，您只需将point3的x&y设置为上一个。我制作了一个数组，并做了一些循环，让它工作得更好一些。查看代码


var xArray=[]；
var-yArray=[]；
推送（（数学地板（数学随机（）*10）+1））；
推送（（数学地板（数学随机（）*10）+1））；
推（（数学地板（数学随机（）*2）-10））；
推（（数学地板（数学随机（）*2）-10））；
函数myFunction（）
{
xArray[xArray.length]=xArray[xArray.length-1]；
yArray[yArray.length]=yArray[yArray.length-1]；
var pointX=（Math.floor（Math.random（）*100）+10）；
var pointY=（Math.floor（Math.random（）*2）-10）；
推送（点X）；
推（尖）；
对于（变量i=0；i”；
}
document.getElementById（“空”）.innerHTML+=“
”；
}
点击我

这很简单<代码>变量点3x=点2x；var point3Y=point2Y。不过，您应该认真研究如何使用数组和循环。它将大大简化您的代码，并使其更易于维护。

<!DOCTYPE html>
<html>
<head>
<script>
    var xArray = [];
    var yArray = [];

    xArray.push((Math.floor(Math.random() * 10) + 1));
    xArray.push((Math.floor(Math.random() * 10) + 1));
    yArray.push((Math.floor(Math.random() * 2) - 10));
    yArray.push((Math.floor(Math.random() * 2) - 10));

    function myFunction()
    {
        xArray[xArray.length] = xArray[xArray.length - 1];
        yArray[yArray.length] = yArray[yArray.length - 1];

        var pointX = (Math.floor(Math.random() * 100) + 10);
        var pointY = (Math.floor(Math.random() * 2) - 10);

        xArray.push(pointX);
        yArray.push(pointY);

        for(var i = 0; i < xArray.length; i++)
        {
            document.getElementById("empty").innerHTML += "(" + xArray[i] + ", " + yArray[i] + ")</br>";
        }
        document.getElementById("empty").innerHTML += "</br>";
     }
 </script>
</head>
<body>

<button onclick="myFunction()">Click me</button>

<p id="empty"></p>

</body>
</html>