Javascript 使用直线以编程方式绘制圆

如何通过点之间的恒定像素差，使用直线绘制圆

我一直在尝试编辑这个算法

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var阶跃=2*Math.PI/22//（22分）
var h=250；
var k=250；
var r=105；
ctx.beginPath（）//告诉画布开始一组行
对于（varθ=0；θ<2*Math.PI；θ+=步长）{
var x=h+r*数学cos（θ）；
var y=k-r*Math.sin（θ）；
ctx.lineTo（x，y）；
ctx.stroke（）；
}
ctx.closePath（）
#我的画布{
边框：薄实灰色；
}
如果希望点之间的距离保持一致，可以根据点的数量（也称为边）和希望点之间的距离计算半径

x = (distance / 2) / sine(step / 2)


const-sides=3；
常数距离=100；
const step=Math.PI*2/边；
常数半径=（距离/2）/数学sin（步长/2）；//57.735


演示
在下面的示例中，绘制了八个（奇数边）多边形，每个相邻点彼此相距50像素

x = (distance / 2) / sine(step / 2)


const DEBUG=true；
常量main=（）=>{
常数
ctx=document.getElementById（'myCanvas'）.getContext（'2d'），
原点={x:ctx.canvas.width/2，y:ctx.canvas.height/2}，
距离=50，最大点=18，起点=3，步长=2；
对于（让点=开始；点<最大点；点+=步）{
绘图圆（ctx、原点.x、原点.y、距离、点）；
}
};
常量绘制圆=（ctx、x、y、距离、边）=>{
如果（边<2）抛出新错误（“圆必须有3条或更多边”）；
常数
向量=（x，y，半径，θ）=>({
x:x+半径*数学cos（θ），
y:y+radius*Math.sin（θ）
}),
d=2*Math.PI，
步骤=d/侧，
半径=（距离/2）/数学sin（步长/2），
极限=d+步进；
//展示
如果（调试）{
常数
d2=距离/2，h=ctx.canvas.height/2，
y1=h-d2，y2=h+d2，x1=0，x2=ctx.canvas.width；
ctx.beginPath（）；
ctx.setLineDash（[2,5]）；
ctx.strokeStyle=‘红色’；
ctx.moveTo（x1，y1）；
ctx.lineTo（x2，y1）；
ctx.moveTo（x1，y2）；
ctx.lineTo（x2，y2）；
ctx.stroke（）；
ctx.closePath（）；
}
ctx.beginPath（）；
ctx.setLineDash（[]）；
ctx.strokeStyle='蓝色'；
对于（设θ=0；θ<极限；θ+=阶跃）{
常数{x:xOffset，y:yOffset}=向量（x，y，半径，θ）；
ctx.lineTo（xOffset，yOffset）；
}
ctx.stroke（）；
ctx.closePath（）；
};
main（）
#我的画布{
边框：薄实灰色；
}
？“点与点之间的50像素”不定义唯一的圆。想象一个边长为50的正方形和三角形。@Taplar我想用线条画它。更改步长值……你是说距离中心（半径）50像素吗？如果你的意思是在每一点之间，那就有点复杂了。