圆圈坐标阵列中Javascript

Question

什么是最好的方式来增加的坐标一圈一系列在JavaScript?到目前为止，我只能做到一半圈,但是我需要一个公式，返回的整个圆到两个不同的阵列： xValues 和 yValues.(我想要得到的坐标，这样我就可以动的对象，沿着道路。)

这是我迄今为止:

circle: function(radius, steps, centerX, centerY){
    var xValues = [centerX];
    var yValues = [centerY];
    for (var i = 1; i < steps; i++) {
        xValues[i] = (centerX + radius * Math.cos(Math.PI * i / steps-Math.PI/2));
        yValues[i] = (centerY + radius * Math.sin(Math.PI * i / steps-Math.PI/2));
   }
}

Answer 1

你的循环，应当是设立这样的替代：

for (var i = 0; i < steps; i++) {
    xValues[i] = (centerX + radius * Math.cos(2 * Math.PI * i / steps));
    yValues[i] = (centerY + radius * Math.sin(2 * Math.PI * i / steps));
}

• 开始你的循环，在0
• 步骤，通过整个2*PI的范围，不只是PI。
• 你不应该有的 var xValues = [centerX]; var yValues = [centerY]; --圆心的不是它的一部分。

Answer 2

Bresenham的算法更快。你听说它与绘制直线有关，但是有一种圆形算法的形式。

无论你是使用它还是继续进行三角计算（这些天都非常快） - 你只需要绘制圆的1/8。通过交换x，y你可以得到另一个1/8，然后是x，y和两者的负数 - 交换和未交换 - 为你提供所有其余圆圈的分数。加速8倍！

Answer 3

变化：

Math.PI * i / steps

为：

2*Math.PI * i / steps

一个完整的圆是2pi弧度，而你只是π弧度。

Answer 4

如果你已经有半个圆圈，只需要镜像点数即可获得另一半 确保按正确的顺序执行此操作。

更具体地说，对于另一半，你只需要替换“ + sin（...）”。用“ - sin（...）”

Answer 5

你需要使用部分函数将弧度输入cos和sin;因此，取圆圈的四分之一或一半所得的值，并将它们反映在中心点的轴上以获得整圆。

那说JavaScript的罪恶和cos并不那么挑剔，所以你必须把你的弧度减半或者其他东西;我把它写成：

function circle(radius, steps, centerX, centerY){
    var xValues = [centerX];
    var yValues = [centerY];
    var table="<tr><th>Step</th><th>X</th><th>Y</th></tr>";
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.fillStyle = "red"
    ctx.beginPath();
    for (var i = 0; i <= steps; i++) {
        var radian = (2*Math.PI) * (i/steps);
        xValues[i+1] = centerX + radius * Math.cos(radian);
        yValues[i+1] = centerY + radius * Math.sin(radian);
        if(0==i){ctx.moveTo(xValues[i+1],yValues[i+1]);}else{ctx.lineTo(xValues[i+1],yValues[i+1]);}
        table += "<tr><td>" + i + "</td><td>" + xValues[i+1] + "</td><td>" + yValues[i+1] + "</td></tr>";
    }
    ctx.fill();
    return table;
}
document.body.innerHTML="<canvas id=\"canvas\" width=\"300\" height=\"300\"></canvas><table id=\"table\"/>";
document.getElementById("table").innerHTML+=circle(150,15,150,150);

我认为无论出于何种原因你想要xValues [0]和yValues [0]为centerX和centerY。我无法弄清楚你为什么要这样，因为它们已经传递给函数了。

Answer 6

我能够通过将步数乘以2来自行解决：

circle: function(radius, steps, centerX, centerY){
    var xValues = [centerX];
    var yValues = [centerY];
    for (var i = 1; i < steps; i++) {
        xValues[i] = (centerX + radius * Math.cos(Math.PI * i / steps*2-Math.PI/2));
        yValues[i] = (centerY + radius * Math.sin(Math.PI * i / steps*2-Math.PI/2));
   }
}