javascript - 如何移动绘制在圆周长上的 X、Y 坐标的起点？

Question

我想在圆周边的左下部分(6 点到 9 点钟方向)绘制一系列点。然而，渲染X、Y坐标的起点始终从3点钟开始。! https://dl.dropboxusercontent.com/u/55849501/plotting-xy.png

这是我的代码的渲染部分:

var items = 5;
for(var i = 0; i < items; i++) {
    var x = 96 + 100 * Math.cos(0.665 * Math.PI * i / items);
    var y = 96 + 100 * Math.sin(0.665 * Math.PI * i / items);   
    $("#center").append("<div class='point' style='left:"+ x +"px;top:"+ y +"px'></div>");    
}

这是正在运行的代码的 jsfiddle:http://jsfiddle.net/jE26S/198/

总结:我希望这些点从 6 点钟位置而不是 3 点钟位置开始渲染。

Answer 1

你在这里真正做的是在两个 theta 值之间进行插值。就您而言，您希望从 Pi/2 开始并在 Pi 结束。我冒昧地使用这种插值范例重写了您的代码片段。另外，您可以使用outerCircleRadius调整点/项目距圆的距离。

var items = 5;
var startTheta = .5 * Math.PI;
var endTheta = 1 * Math.PI;
var outerCircleRadius = 112;
var cx = 90;
var cy = 90;
for(var i = 0; i < items; i++) {
    var theta = startTheta + (endTheta - startTheta) * i / (items - 1)
    var x = cx + outerCircleRadius * Math.cos(theta);
    var y = cy + outerCircleRadius * Math.sin(theta);   
    $("#center").append("<div class='point' style='left:"+ x +"px;top:"+ y +"px'></div>");    
}