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

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保存在数据库中,而不是保存数据库中的所有点.

然后,您可以使用相同的数学运算来创建点并绘制圆.