在使用jQuery动画时在对象之后绘制线条

Posted 2023-05-08

【中文标题】在使用jQuery动画时在对象之后绘制线条

【英文标题】：Drawing line after object while using jQuery animate

【发布时间】：2014-01-06 08:50:37

【问题描述】：

我有这个正方形，它每 5 秒动画到一个随机位置。我现在想做的是在正方形移动时在正方形后面画一条线，这样我就可以看到它在哪里等等。有什么想法我应该怎么做？非常感谢帮助，谢谢！

<div id="square" style="width:50px; height:50px; background:blue; position:relative;"/>

<script>
$(document).ready(function()
  setInterval(function()

    var posx = Math.floor((Math.random()*1000)+1);
    var posy = Math.floor((Math.random()*1000)+1);

  $('#square').animate( left:(posx*1), top: (posy*1) , 3000);  

 ,5000);
);

</script>

【参考方案1】：

这是一个例子。它不漂亮，但应该可以帮助您入门。

http://jsfiddle.net/9gcXN/

html

<canvas   id="mycanvas" style="position: absolute; left: 0px; top: 0px;"></canvas>
<div id="square" style="width:50px; height:50px; background:blue; position: absolute;"></div>

JS

canvas = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');

$(document).ready(function() 
var posx,posy,lastx,lasty = 0;

    setInterval(function()
    lastx = posx;
    lasty = posy;

    posx = Math.floor((Math.random()*100)+1);
    posy = Math.floor((Math.random()*100)+1);

        $('#square').animate( left:(posx*1), top: (posy*1) , 3000, function() 
        ctx.beginPath();
ctx.moveTo(lastx,lasty);
ctx.lineTo(posx,posy);
ctx.stroke();

        );  

,3000);
);

希望对你有帮助！

【讨论】：

谢谢，这将有很大帮助！ @MagnusEngdal

【参考方案2】：

您可以使用step function for jQuery.animate()。

$(document).ready(function() setInterval(function()

var posx = Math.floor((Math.random()*1000)+1);
var posy = Math.floor((Math.random()*1000)+1);

  $('#square').animate( left:(posx*1), top: (posy*1) , 
      duration: 3000,
      step: function (now, tween) 
          var elemOffset = $(tween.elem).offset();
          $('<div class="a"></div>').css(top: elemOffset.top, left: elemOffset.left).appendTo('body');
      
  );  

,5000); );

我在 jsfiddle 上的例子：

http://jsfiddle.net/g7xGy/