Javascript画布绘图-形状已填充

我试图画一系列围绕中心点的圆，这是一个非常非常基本的版本：

到目前为止，我已经做到了这一点，但形状已经填充，我不知道为什么。它实际上看起来很酷，但不是我想要的；）

var-origin\ux=200；
var origin_y=200；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
类行星{
构造器（轨道速度、轨道半径、半径）{
这个。轨道速度=轨道速度；
这个。轨道半径=轨道半径；
这个半径=半径；
这个.draw（）
}
画（）{
常数θ=t*这是轨道速度
常数x=原点x+这个轨道半径*数学cos（θ）
常数y=原点y+这个轨道半径*数学sin（θ）
弧（x，y，this.radius，0，2*Math.PI，'逆时针'）
ctx.fill（）；
}
}
设t=0；
setInterval（函数（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
常数a=新行星（2*Math.PI，30,1）；
常数b=新行星（数学PI，50，1）；
常数c=新行星（0.5*Math.PI，70,1）；
常数d=新行星（0.25*Math.PI，90,1）；
t+=0.1；
}, 40);
您需要调用
ctx.beginPath（）
和
ctx.closePath（）
，否则画布会认为您正在绘制复杂的元素/多边形，并尝试填充它


var-origin\ux=200；
var origin_y=200；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
类行星{
构造器（轨道速度、轨道半径、半径）{
这个。轨道速度=轨道速度；
这个。轨道半径=轨道半径；
这个半径=半径；
这个.draw（）
}
画（）{
常数θ=t*这是轨道速度
常数x=原点x+这个轨道半径*数学cos（θ）
常数y=原点y+这个轨道半径*数学sin（θ）
ctx.beginPath（）；
弧（x，y，this.radius，0，2*Math.PI，'逆时针'）
ctx.fill（）；
ctx.closePath（）；
}
}
设t=0；
setInterval（函数（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
常数a=新行星（2*Math.PI，30,1）；
常数b=新行星（数学PI，50，1）；
常数c=新行星（0.5*Math.PI，70,1）；
常数d=新行星（0.25*Math.PI，90,1）；
t+=0.1；
}, 40);
您需要调用
ctx.beginPath（）
和
ctx.closePath（）
，否则画布会认为您正在绘制复杂的元素/多边形，并尝试填充它


var-origin\ux=200；
var origin_y=200；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
类行星{
构造器（轨道速度、轨道半径、半径）{
这个。轨道速度=轨道速度；
这个。轨道半径=轨道半径；
这个半径=半径；
这个.draw（）
}
画（）{
常数θ=t*这是轨道速度
常数x=原点x+这个轨道半径*数学cos（θ）
常数y=原点y+这个轨道半径*数学sin（θ）
ctx.beginPath（）；
弧（x，y，this.radius，0，2*Math.PI，'逆时针'）
ctx.fill（）；
ctx.closePath（）；
}
}
设t=0；
setInterval（函数（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
常数a=新行星（2*Math.PI，30,1）；
常数b=新行星（数学PI，50，1）；
常数c=新行星（0.5*Math.PI，70,1）；
常数d=新行星（0.25*Math.PI，90,1）；
t+=0.1；
}, 40);