Javascript 为什么画布角落的球的速度较低？

对不起，我的英语不是我的母语。我希望你能理解我。 我做了一个球，它在我定义的画布上沿着特定的路径移动。一切都进行得很顺利，我的球移动正确，但我注意到当球到达一个角落时，它的速度低于它直线移动时的速度。有人知道为什么会这样吗？ 这是我的密码。 提前谢谢

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame | | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame | | |函数（回调）{
设置超时（回调，1000/60）；
};
})();
var pathArray=[]；
pathArray.push({
x:150，
y:100
});
pathArray.push({
x:1375，
y:100
});
pathArray.push({
x:1375，
y:230
});
pathArray.push({
x:150，
y:230
});
pathArray.push({
x:150，
y:320
});
pathArray.push({
x:1375，
y:320
});
pathArray.push({
x:1375，
y:450
});
pathArray.push({
x:150，
y:450
});
var polypoints=makePolyPoints（路径数组）；
var宽度=15；
var高度=30；
无功转速=1/2；
var位置=0；
制作动画（）；
函数animate（）{
setTimeout（函数（）{
请求动画帧（动画）；
位置+=速度；
如果（位置>多点长度-1）{
返回；
}
var pt=多点[位置]；
if（pt）{
ctx.save（）；
ctx.beginPath（）；
ctx.translate（pt.x，pt.y）；
ctx.弧（-宽度/2，-高度/2,12,0,2*Math.PI）；
ctx.fillStyle=“#B22222”；
ctx.fill（）；
ctx.restore（）；
}
}, 1000 / 60);
}
函数makePolyPoints（pathArray）{
var点=[]；
对于（变量i=1；i对于（var n=0；n这是因为当您的
makePolyPoints（）
函数将路径拆分为点时，它总是在每条线上创建200个点，而不考虑实际距离

你要做的是用毕达哥拉斯计算距离，然后相应地设置点数。我在函数参数中加入了一个
speedFactor
，这样你就可以进行微调了


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame | | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame | | |函数（回调）{
设置超时（回调，1000/60）；
};
})();
var pathArray=[]；
pathArray.push({
x:150，
y:100
});
pathArray.push({
x:1375，
y:100
});
pathArray.push({
x:1375，
y:230
});
pathArray.push({
x:150，
y:230
});
pathArray.push({
x:150，
y:320
});
pathArray.push({
x:1375，
y:320
});
pathArray.push({
x:1375，
y:450
});
pathArray.push({
x:150，
y:450
});
var polypoints=makePolyPoints（路径数组，5）；
var宽度=15；
var高度=30；
无功转速=1/2；
var位置=0；
制作动画（）；
函数animate（）{
setTimeout（函数（）{
请求动画帧（动画）；
位置+=速度；
如果（位置>多点长度-1）{
返回；
}
var pt=多点[位置]；
if（pt）{
ctx.save（）；
ctx.beginPath（）；
ctx.translate（pt.x，pt.y）；
ctx.弧（-宽度/2，-高度/2,12,0,2*Math.PI）；
ctx.fillStyle=“#B22222”；
ctx.fill（）；
ctx.restore（）；
}
}, 1000 / 60);
}
函数makePolyPoints（路径数组、速度因子）{
var点=[]；
对于（变量i=1；i对于（var n=0；n这是因为当您的
makePolyPoints（）
函数将路径拆分为点时，它总是在每条线上创建200个点，而不考虑实际距离

你要做的是用毕达哥拉斯计算距离，然后相应地设置点数。我在函数参数中加入了一个
speedFactor
，这样你就可以进行微调了


var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame | | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame | | |函数（回调）{
设置超时（回调，1000/60）；
};
})();
var pathArray=[]；
pathArray.push({
x:150，
y:100
});
pathArray.push({
x:1375，
y:100
});
pathArray.push({
x:1375，
y:230
});
pathArray.push({
x:150，
y:230
});
pathArray.push({
x:150，
y:320
});
pathArray.push({
x:1375，
y:320
});
pathArray.push({
x:1375，
y:450
});
pathArray.push({
x:150，
y:450
});
var polypoints=makePolyPoints（路径数组，5）；
var宽度=15；
var高度=30；
无功转速=1/2；
var位置=0；
制作动画（）；
函数animate（）{
setTimeout（函数（）{
请求动画帧（动画）；
位置+=速度；
如果（位置>多点长度-1）{
返回；
}
var pt=多点[位置]；
if（pt）{
ctx.save（）；
ctx.beginPath（）；
ctx.translate（pt.x，pt.y）；
ctx.弧（-宽度/2，-高度/2,12,0,2*Math.PI）；
ctx.fillStyle=“#B22222”；
ctx.fill（）；
ctx.restore（）；
}
}, 1000 / 60);
}
函数makePolyPoints（路径数组、速度因子）{
var点=[]；
对于（变量i=1；i