用javascript绘制轨迹？

不知道还有什么地方可以问这个问题。我在HTML中使用了一个，我想画一个从画布左下角开始的投射物的轨迹，以一定的速度（比如

45度
在
10ms
）以一定的角度发射。到目前为止，我主要看到使用

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo((180), 180);

ctx.stroke();

但那只画了一条直线？
你想要的是一个在X和Y方向都有速度的物体。对于每个迭代，您将由于重力而降低Y的速度。对于每个迭代，您可以画一条线，请参见下面的示例


var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
c、 宽度=450；
c、 高度=300；
var x=0；
变量y=300；
var-oldX=0；
var oldY=300；
var xVel=10；
var-yVel=-20；
var g=1；
var myInterval=setInterval（函数（）{
x+=xVel；
y+=yVel；
yVel+=g；
ctx.beginPath（）；
ctx.moveTo（oldX，oldY）；
ctx.lineTo（x，y）；
ctx.stroke（）；
oldX=x；
oldY=y；
如果（y>c.height）{clearInterval（myInterval）；}
},20);
画布{
边框：1px纯黑；
}
你想要的是一个在X和Y方向都有速度的物体。对于每个迭代，您将由于重力而降低Y的速度。对于每个迭代，您可以画一条线，请参见下面的示例


var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
c、 宽度=450；
c、 高度=300；
var x=0；
变量y=300；
var-oldX=0；
var oldY=300；
var xVel=10；
var-yVel=-20；
var g=1；
var myInterval=setInterval（函数（）{
x+=xVel；
y+=yVel；
yVel+=g；
ctx.beginPath（）；
ctx.moveTo（oldX，oldY）；
ctx.lineTo（x，y）；
ctx.stroke（）；
oldX=x；
oldY=y；
如果（y>c.height）{clearInterval（myInterval）；}
},20);
画布{
边框：1px纯黑；
}
维基百科中有一些精确的[x，y]轨迹计算：


但是，如果你只想让你的射弹与目标形成一条弧线，你可以这样做：


给定起始点（p0）和目标点（p2）
在指定距离（p1）处计算一个垂直于p0和p2中点的点
绘制一条从p0到p2的二次曲线，p1作为曲线的中间控制点


如果要沿该二次曲线绘制点，可以使用De Casteljau算法，然后沿绘制点绘制投射物：

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return( {x:x,y:y} );
}


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var p0={x:0，y:ch}；
变量p2={x:180，y:180}；
var距离=25；
var-p1；
var-nextTime=0；
无功延时=1000/60*3；
var-pts；
var ptIndex=0；
重画（）；
$myslider=$（“#myslider”）；
$myslider.attr（{min:0，max:100}）.val（距离）；
$myslider.on（'input change'，function（））{
距离=parseInt（$（this）.val（））；
重画（）；
});
$（“#绘图”）。单击（函数（）{
pts=曲线图（p0、p1、p2）；
ptIndex=0；
requestAnimationFrame（animatePlot）；
});
函数animatePlot（时间）{
//如果（时间维基百科中有一些精确的[x，y]轨迹计算：


但是，如果你只想让你的射弹与目标形成一条弧线，你可以这样做：


给定起始点（p0）和目标点（p2）
在指定距离（p1）处计算一个垂直于p0和p2中点的点
绘制一条从p0到p2的二次曲线，p1作为曲线的中间控制点


如果要沿该二次曲线绘制点，可以使用De Casteljau算法，然后沿绘制点绘制投射物：

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return( {x:x,y:y} );
}


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var p0={x:0，y:ch}；
变量p2={x:180，y:180}；
var距离=25；
var-p1；
var-nextTime=0；
无功延时=1000/60*3；
var-pts；
var ptIndex=0；
重画（）；
$myslider=$（“#myslider”）；
$myslider.attr（{min:0，max:100}）.val（距离）；
$myslider.on（'input change'，function（））{
距离=parseInt（$（this）.val（））；
重画（）；
});
$（“#绘图”）。单击（函数（）{
pts=曲线图（p0、p1、p2）；
ptIndex=0；
requestAnimationFrame（animatePlot）；
});
函数animatePlot（时间）{
//if（time）添加一个您想要的工作代码示例（例如在JSbin中）更详细地说，你所期望的问题太广泛了……要画出一条轨迹，你首先应该确定是否有重力，是否计算出射弹的质量，是否有空气阻力。你应该使用物理引擎来简化你的生活。添加一个你想要的工作代码示例（例如在JSbin中）更详细地说，这是一个太宽泛的问题……要画出一条轨道，你首先要确定是否有重力，如果你计算弹丸的质量，是否有空气阻力。你应该使用物理引擎来简化你的生活。