Javascript 圆圈未正确使用画布通过线连接

我试图创建11个圆，通过一个中间圆的线连接。我在试着画圆圈。在这里，我做了一些研发工作，但我不能生产线。请帮我完成这个

var画布，ctx；
var circlePoints=[]；
函数createCanvasPaint（）{
canvas=document.getElementById（'myCanvas'）；
如果（！canvas | |！canvas.getContext）{
返回false；
}
画布宽度=600；
帆布高度=600；
ctx=canvas.getContext（'2d'）；
ctx.strokeStyle='#B8D9FE'；
ctx.fillStyle='#B8D9FE'；
翻译（300250）；
ctx.arc（0,0,50,0，Math.PI*2）；//中心圆
ctx.stroke（）；
ctx.fill（）；
var=0；
对于（变量i=0；i 0）{
角度旋转+=32.72；
}
线到角（ctx，0，0，200，角度旋转）；
}
}
功能线到角度（ctx、x1、y1、长度、角度）{
角度*=数学PI/180；
var x2=x1+长度*数学cos（角度），
y2=y1+长度*数学正弦（角度）；
ctx.beginPath（）；
ctx.moveTo（x1，y1）；
ctx.lineTo（x2，y2）；
ctx.lineWidth=1；
ctx.arc（x2，y2，40，0，Math.PI*2）；
ctx.fill（）；
ctx.stroke（）；
圆点推送（{x:x2，y:y2}）；
//控制台日志（圆形点）；
}
创建画布绘制（）
见下文，我从您的代码中删除了所有“噪音”。

只是用线连接中间圆的圆


canvas=document.getElementById（'myCanvas'）；
canvas.width=canvas.height=200；
ctx=canvas.getContext（'2d'）；
ctx.lineWidth=1；
ctx.translate（99,99）；
角度=0；
函数绘图（）{
ctx.clearRect（-99，-99200200）；
ctx.beginPath（）；
ctx.arc（0,0,35+数学cos（角度/3000），0，数学PI*2）；
ctx.stroke（）；
ctx.fill（）；
对于（变量i=0；i<11；i++）{
a=角度*Math.PI/180；
x=80*Math.cos（a）
y=80*Math.sin（a）
ctx.beginPath（）；
弧（x，y，18，0，Math.PI*2）；
ctx.moveTo（x，y）；
ctx.lineTo（0,0）；
ctx.fill（）；
ctx.stroke（）；
角度+=32.7；
}
}
设置间隔（抽签，10）
我没有得到这个零件！“我正在尝试画圆圈。在这里，我正在做一些研发工作，但我不能画线条”。@Manjuboyz，如果你运行代码段，你可以看到连接到圆圈的线条是粗体的。正确，那么你需要粗体还是细体的线条？嗨@Manjuboyz，线宽不起作用。嗨@Helder Sepulveda，你太棒了。找到了我想要的答案。但我不需要轮换。我需要当用户点击外圆它将重定向到一个新的标签中的任何外部链接。你能帮我一下吗？提前感谢。：）这是一个有趣的转折点，现在你需要跟踪画布上的点击事件并采取行动如果点击一个圆圈，我感觉这不是需求的终点，也许你应该使用一个库，如…并且旋转很容易禁用，这是通过调用draw函数来设置动画的
setInterval
，换成一个电话，轮换就结束了