Javascript JS/Canvas单线动画

我想使用JavaScript和Canvas标记制作一个单行动画。我能做到这一点，没有任何问题，除了：

如果你试着做一条直线，效果很好-我有一个间隔（10ms）加上1px，所以如果它从150px（x）/20px（Y）到150px（x）/200px（Y）-一切看起来都很酷

问题在于线路向右或向左——例如从150px（x）/20px（Y）到35px（x）/200px（Y）

在这里，我的动画失败了，因为每10毫秒向X和Y添加1px会使线首先击中左侧（35px），然后从那里到达终点Y

这是我的代码（您需要Firefox或Opera）--正如您所看到的，行很快就会到达左侧，这就是我的问题：(

正文{背景：#fff；颜色：#ccc；}
var起始点x=150；
var起始点=25；
var-curposx=150；
var-curposy=25；
var-myinterval；
函数init（）{
myinterval=setInterval（'animate（35250）'10）；
}
随机函数（n）
{
返回（Math.floor（Math.random（）*n））；
}
函数设置动画（端点X、端点Y）{
if（curposx==endpointx&&curposy==endpointy）{
clearInterval（myinterval）；
drawShape（endpointx，endpointy）；
返回false；
}否则{
if（curposx！=endpointx）{
if（endpointx>curposx）{
curposx=curposx+1；
}否则{
curposx=curposx-1；
}
}
如果（curposy假设你想从点（0,0）到（100200）画一条直线。水平距离是100，垂直距离是200，这意味着当你水平移动端点1个像素时，你需要垂直移动它2个像素（或者，垂直移动一个像素，水平移动0.5个像素）

要计算差异，可以使用以下算法：

   var deltaX = Math.abs( endpointx - startpointx );
   var deltaY = Math.abs( endpointy - startpointy );
   var diffX = 1, diffY = 1;
   if( deltaX > deltaY ){
      diffY = deltaY / deltaX;
   }
   else if( deltaX < deltaY ) {
      diffX = deltaX / deltaY;
   }

var deltaX=Math.abs（endpointx-startpointx）；
var deltaY=Math.abs（endpointy-startpointy）；
var diffX=1，diffY=1；
如果（deltaX>deltaY）{
diffY=三角洲/三角洲；
}
否则如果（德尔泰<德尔泰）{
diffX=deltaX/deltaY；
}

然后，在动画中，您需要将curposx和curposy分别增加/减少1和diffX和diffY。此计算应该在animate（）函数之外完成（因为它总是返回相同的结果）。
工作得很好。谢谢您，先生。：）
   var deltaX = Math.abs( endpointx - startpointx );
   var deltaY = Math.abs( endpointy - startpointy );
   var diffX = 1, diffY = 1;
   if( deltaX > deltaY ){
      diffY = deltaY / deltaX;
   }
   else if( deltaX < deltaY ) {
      diffX = deltaX / deltaY;
   }