3


3

JS / Canvas単一行アニメーション

JavaScriptとCanvasタグを使用して、1行のアニメーションを作成したいと思います。 次の場合を除き、問題なく実行できます。

直線を行おうとするとうまくいきます-1pxを追加する間隔(10ms)があるので、150px(x)/ 20px(Y)から150px(X)/ 200px(Y)-すべてかっこいいね。

問題は、行が右または左に行くことです-たとえば、150px(x)/ 20px(Y)から35px(X)/ 200px(Y)

ここでは、XとYの両方に10ミリ秒ごとに1ピクセルを追加すると、最初に行が左側(35ピクセル)にヒットし、そこからエンドポイントYに移動するため、アニメーションが失敗します。

ここに私のコード(FirefoxまたはOperaが必要です)-すぐに左側の行ヒットを見ることができるので、それが私の問題です。 :(

body {background: #fff; color: #ccc;}



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();

1 Answer


3


ポイント(0、0)から(100、200)に直線を描きたいとしましょう。 水平距離は100、垂直距離は200です。つまり、エンドポイントを水平方向に1ピクセル移動する場合、垂直方向に2ピクセル移動する必要があります(垂直方向に1ピクセル、水平方向に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()関数の外部で実行する必要があります(常に同じ結果が返されるため)。