Question

所以，如果这是我用来在画布上绘制圆圈的代码：

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.lineWidth = 3;
ctx.strokeStyle = "black";
ctx.stroke();

...我怎样才能得到构成这个圆圈的点的坐标数组，这样我就可以将它们保存在数据库中，然后使用context.moveTo（）和context.lineTo（）方法加载到画布上连接点，绘制相同的圆圈？

我想我问是否可以使用非.arc（）方法绘制这种圆形，但是如果我只知道我的中心坐标和圆半径（当然还有圆的宽度）线条和颜色）。这应该使我能够在循环时保存数组中的每个点坐标。

Answer 1

@Octopus走在正确的轨道上：

var centerX=100;
var centerY=100;
var radius=40;

// an array to save your points
var points=[];

for(var degree=0;degree<360;degree++){
    var radians = degree * Math.PI/180;
    var x = centerX + radius * Math.cos(radians);
    var y = centerY + radius * Math.sin(radians);
    points.push({x:x,y:y});
}

然后你可以使用点数组中的点对象绘制圆圈：

ctx.beginPath();
ctx.moveTo(points[0].x,points[0].y);
for(var i=1;i<points.length;i++){
    ctx.lineTo(points[i].x,points[i].y);
}
ctx.closePath();
ctx.fillStyle="skyblue";
ctx.fill();
ctx.strokeStyle="lightgray";
ctx.lineWidth=3;
ctx.stroke()

建议，但是......

只需将centerX / Y和radius保存在数据库中，而不是保存数据库中的所有点。

然后你可以使用相同的数学来创建点并绘制圆圈。

Answer 2

您要求的圆形公式为：

radius*radius = (x-centerX)*(x-centerX) + (y-centerY)*(y-centerY)

或者，如果您想生成 n 点，请执行以下操作：

for (i=0;i<n;i++) {
    x[i] = centerX + radius* Math.cos( (i*2*Math.PI)/n );
    y[i] = centerY + radius*-Math.sin( (i*2*Math.PI)/n );
}

如何在画布中获得构成圆形的坐标数组？

2 个答案: