Fatal编程技术网
  • javascript/
  • Javascript 创建一个"；“尾巴”；对于正在绕轨道运行的对象

Javascript 创建一个"；“尾巴”；对于正在绕轨道运行的对象

javascript canvas

Javascript 创建一个"；“尾巴”；对于正在绕轨道运行的对象,javascript,canvas,orbital-mechanics,Javascript,Canvas,Orbital Mechanics,编辑 下面是一个JSFIDLE，其中包含注释掉“tail”函数的代码 我有一个我正在研究的物体，它有一个围绕中心质量运行的物体。那很好用。 我现在正试图在行星后面添加一条尾随线或“尾巴”。 “我的尾巴”对象如下所示： function Tail(maxLength){ this.points = []; this.maxLength = maxLength; this.addPoint = function(point){ for(var i = Math.min(maxL

编辑

下面是一个JSFIDLE，其中包含注释掉“tail”函数的代码

我有一个我正在研究的物体，它有一个围绕中心质量运行的物体。那很好用。

我现在正试图在行星后面添加一条尾随线或“尾巴”。 “我的尾巴”对象如下所示：

function Tail(maxLength){
  this.points = [];
  this.maxLength = maxLength;
  this.addPoint = function(point){
    for(var i = Math.min(maxLength, this.points.length); i < maxLength; i++){
        this.points[i] = this.points[i - 1];
    }

    this.points[0] = point;
 }
 this.draw = function(ctx){
    for(var i = 1; Math.min(maxLength, this.points.length); i++){
        if(i < maxLength - 20){
            ctx.globalAlpha = 1;
        } else {
            ctx.globalAlpha = (this.maxLength - i) / 20;
        }

        ctx.beginPath();
        ctx.moveTo(this.points[i - 1].x, this.points[i - 1].y);
        ctx.lineTo(this.points[i].x, this.points[i].y);
        ctx.stroke();
    }

    ctx.globalAlpha = 1;
  }
}

函数尾部（最大长度）{
此参数为.points=[]；
this.maxLength=maxLength；
this.addPoint=函数（点）{
for（var i=Math.min（maxLength，this.points.length）；i
addPoint函数接受一个类似{x:currentX，y:currentY}的对象 currentX和currentY是对象在被调用时的x和y点

我不知道如何将点添加到点阵列中，然后根据这些坐标进行绘制。

如果使用低不透明度的背景填充帧，而不是清除背景，则可以可视化对象的轨迹：

var画布，宽度，高度，ctx；
var主体=[]；
函数init（）{
canvas=document.getElementById（“时空”）；
宽度=window.innerWidth；
高度=窗内高度；
画布宽度=宽度；
canvas.height=高度；
ctx=canvas.getContext（'2d'）；
createBodies（）；
setInterval（函数（）{
更新系统（）；
更新版本（0.01）；
//ctx.clearRect（0，0，宽度，高度）；
//这里的所有魔术：
ctx.fillStyle=`rgba（0,0,0,05）`；
ctx.shadowBlur=0；
ctx.fillRect（0，0，canvas.width，canvas.height）；
抽绳机构（）；
}, 10);
}
函数createBodies（）{
Body.push（新Body（（this.width/2）-250，（this.height/2）-300200,0,1,10，“#14c71d”，true））；
Body.push（新Body（（this.width/2）+100，（this.height/2）+100350,0,1,5，“#de2d16”，true））；
Body.push（新Body（this.width/2，this.height/2，0，0，1000000，30，“#FF8501”，false））；//sun
}
函数Drawbody（）{
对于（变量i=0；i
时空{ 背景色：#1a1a1c； } 

太阳系AJ
我将您的版本修改为工作状态

var画布，宽度，高度，ctx；
var主体=[]；
函数init（）{
canvas=document.getElementById（“时空”）；
宽度=window.innerWidth；
高度=窗内高度；
画布宽度=宽度；
canvas.height=高度；
ctx=canvas.getContext（'2d'）；
createBodies（）；
setInterval（函数（）{
更新系统（）；
更新版本（0.01）；
ctx.clearRect（0，0，宽度，高度）；
抽绳机构（）；
}, 10);
}
函数createBodies（）{
Body.push（新Body（（this.width/2）-250，（this.height/2）-300200,0,1,10，“#14c71d”，true））；
Body.push（新Body（（this.width/2）+100，（this.height/2）+100350,0,1,5，“#de2d16”，true））；
Body.push（新Body（this.width/2，this.height/2，0，0，1000000，30，“#FF8501”，false））；//sun
}
函数Drawbody（）{
对于（变量i=0；i