Javascript Paper.js不'；不要画多个形状

我对JavaScript完全陌生，所以我请求帮助。我试图创建一个简单的太阳系模拟，它被表示为几个小圆圈（行星）围绕一个大圆圈（太阳）运动。我使用Paper.js创建动画

我创建了两个类：恒星和行星。Star类有draw（）方法绘制恒星，Planet类有motion（）方法使行星移动

问题是，当我创建几个对象并调用它们的draw（）/motion（）方法，然后尝试运行脚本时，我创建的最后一个对象是唯一要绘制/设置动画的对象

例如，在此代码中：

var sun = new Star("Sun", 400, 400, 50, '#fff250');
sun.draw();


var earth = new Planet("Earth", sun, 100, 10, 1.5, '#b6f7ff');
earth.motion();

var mars = new Planet("Mars", sun, 200, 10, 0.5, '#ff9485');
mars.motion();

motion（）可以很好地工作，但是忽略了另外两个方法。如果我去掉这个方法，地球就会出现等等

以下是完整代码：

函数星（名称、X坐标、Y坐标、半径、颜色）{
this.name=名称；
this.xCoordinate=xCoordinate；
this.yCoordinate=yCoordinate；
这个半径=半径；
这个颜色=颜色；
var canvas=document.getElementById（“canvas1”）；
纸。设置（画布）；
this.draw=函数（）{
var circle=新纸张路径圆（新纸张点（xCoordinate，yccoordinate），半径）；
circle.fillColor=颜色；
}
}
功能行星（名称、父星、与恒星的距离、半径、周期、颜色）{
this.name=名称；
this.parentStar=parentStar；
this.distanceFromStar=距离fromstar；
这个半径=半径；
这个周期=周期；
这个颜色=颜色；
var xCoordinate=父星.xCoordinate+与星的距离；
var yCoordinate=父星。yCoordinate+与星的距离；
var canvas=document.getElementById（“canvas1”）；
纸。设置（画布）；
this.motion=函数（）{
var circle=新纸张路径圆（新纸张点（xCoordinate，yccoordinate），半径）；
circle.fillColor=颜色；
paper.view.onFrame=函数（事件）{
circle.position.x=parentStar.xCoordinate-distanceFromStar*Math.cos（period*event.time）；
circle.position.y=parentStar.yCoordinate-distanceFromStar*Math.sin（period*event.time）；
}
}
}
window.onload=函数（）{
var太阳=新星（“太阳”，400，400，50，#fff250'）；
sun.draw（）；
var earth=新行星（“地球”，太阳，100,10,1.5，#b6f7ff'）；
地球运动（）；
var mars=新行星（“火星”，太阳，200,10,0.5'#ff9485'）；
火星运动（）；
}

标题

您对问题的假设是正确的

每次绘制元素时，都要设置整个画布

只需设置一次（只需从draw方法中删除设置并将其添加到

窗口。onload

）

另一个问题是，您将每个planets更新代码指定为

paper.view.onFrame

。但它只能包含一个函数。为此，我创建了一个列表，其中列出了每个行星的更新函数，然后在

paper.view.onFrame

中迭代数组并执行每个行星函数

这是您的代码和更改

var planetList=[]；
函数星（名称、X坐标、Y坐标、半径、颜色、画布）{
this.name=名称；
this.xCoordinate=xCoordinate；
this.yCoordinate=yCoordinate；
这个半径=半径；
这个颜色=颜色；
this.draw=函数（）{
var circle=新纸张路径圆（新纸张点（xCoordinate，yccoordinate），半径）；
circle.fillColor=颜色；
}
}
功能行星（名称、父星、距星距离、半径、周期、颜色、画布）{
this.name=名称；
this.parentStar=parentStar；
this.distanceFromStar=距离fromstar；
这个半径=半径；
这个周期=周期；
这个颜色=颜色；
var xCoordinate=父星.xCoordinate+与星的距离；
var yCoordinate=父星。yCoordinate+与星的距离；
this.motion=函数（）{
var circle=新纸张路径圆（新纸张点（xCoordinate，yccoordinate），半径）；
circle.fillColor=颜色；
planetList.push（功能（事件）{
circle.position.x=parentStar.xCoordinate-distanceFromStar*Math.cos（period*event.time）；
circle.position.y=parentStar.yCoordinate-distanceFromStar*Math.sin（period*event.time）；
});
}
}
window.onload=函数（）{
var canvas=document.getElementById（“canvas1”）；
纸。设置（画布）；
var太阳=新星（“太阳”，400，400，50，#fff250’，）；
sun.draw（）；
var earth=新行星（“地球”，太阳，100,10,1.5，#b6f7ff'）；
地球运动（）；
var mars=新行星（“火星”，太阳，200,10,0.5'#ff9485'）；
火星运动（）；
paper.view.onFrame=函数（事件）{
var pLen=平面列表长度，
P
对于（p=0；p@͘͘͘͘͘͘͘͘͘͘͘͘͘͘͘͘͘͘，它解决了部分问题。我刚刚添加了解决方案的其余部分。