Question

我想使用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） - 因为你可以更早地看到线路命中，这就是我的问题。：（

<html>
<script type="text/javascript" src="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script>
<style>
body {background: #fff; color: #ccc;}
</style>

<script type="text/javascript">
var startpointx = 150;
var startpointy = 25;
var curposx = 150;
var curposy = 25;
var myinterval;

function init() {
        myinterval = setInterval( ' animate(35, 250) ', 10);
}

function random (n)
{
  return (Math.floor (Math.random() * n));
}

function animate(endpointx, endpointy) {
        if (curposx == endpointx && curposy == endpointy){
            clearInterval(myinterval);
            drawShape(endpointx, endpointy);
            return false;
        } else {

            if(curposx != endpointx){
                if(endpointx > curposx) {
                    curposx = curposx + 1;
                } else {
                    curposx = curposx - 1;
                }
            }
            if(curposy <= endpointy){
            curposy = curposy + 1;
            }
        }
    drawShape(curposx, curposy, "#000");
}

function drawShape(tendpointx, tendpointy, clor){
     var canvas = document.getElementById('cnvs');
     var ctx = canvas.getContext('2d');

       ctx.clearRect(0,0,310,400);
       ctx.strokeStyle = clor;
         ctx.beginPath();
         ctx.moveTo(startpointx ,startpointy );
         ctx.lineTo(tendpointx,tendpointy);
         ctx.stroke();
}  

//  
init();

</script>


<body>
<canvas id="cnvs" width="310" height="400" style="border: 1px solid #ccc;"></canvas>
</body>
</html>

Answer 1

假设你想从点（0,0）到（100,200）绘制一条直线。水平距离为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;
   }

然后在你的动画中你需要增加/减少curposx和curposy不是1，而是分别增加/减少diffX和diffY。此计算应在animate（）函数之外完成（因为它总是返回相同的结果）。

JS / Canvas单行动画

1 个答案: