JavaScriptを使って移動する要素の次に線を描画する方法

Question

移動する要素の後ろに線を描きたい。

要素は画面の左下から始まり、凹状の曲線で右上に移動します。

この要素の後ろに破線/点線を描きたいとします。たとえば、要素がペンなどのようにします。ここで

等私は、動画像について何を意味するかを説明する必要がありJSフィドル https://jsfiddle.net/jn9za5ez/8/

$('.plane').animate({ 
    left: 300, 
    top: [50, 'easeInQuad'] 
}, 1800); 

上記のjsである私は、コードを提供せずにjsfiddleリンクを提出することはできませんので、ポストの一部であり、 ...

この問題にアプローチするにはどうすればよいでしょうか？

EDIT：要素は、飛行経路に沿って45度から0度のように、曲線に沿ってわずかに回転する飛行機/ロケットなどに似たものになるでしょう。ここに私が意味するものがあります： http://imgur.com/a/z37m2

ありがとう。

Answer 1

あなたはこれを試すことができます。jsfiddle.net/bharatsing/jn9za5ez/16/

$(document).ready(function() { 
    $('.plane').animate({ 
     left: 300, 
     top: [50, 'easeInQuad'] 
    }, 
    { 
     duration: 5000, 
     easing: 'swing', 
     step: function(now, fx) { 

     }, 
     progress: function(fx, progress) {    
      var x=getOffset(fx.elem); 
      var lineid=Math.round(progress * 100); 
      if($("#"+lineid).length==0){   
       $(fx.elem).after("<span id='"+lineid+"' class='line' style='top:"+x.top+"px;left:"+x.left+"px;'>.</span>"); 
      } 
     } 
    }); 

    function getOffset(el) { 
     var _x = 0; 
     var _y = 0; 
     while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
      _x += el.offsetLeft - el.scrollLeft; 
      _y += el.offsetTop - el.scrollTop; 
      el = el.offsetParent; 
     } 
     return { top: _y, left: _x }; 
    } 
}); 

スタイル私が探しているものにやや近いです

.plane 
{ 
    width:10px; 
    height:10px; 
    position: absolute; 
    bottom:0px; 
    background-color:black; 
} 
.line{ 
    position:absolute; 
    font-size:20px; 
}