HTML，畫布，畫線，而jQuery的的動畫（）：我不希望它是持久的

Question

讓我們來看看這個小提琴：

http://jsfiddle.net/Z2swQ/

$(document).ready(function() { 
    $('#a').animate({ 
     left: 100, 
     top: 50 
    }, 
    { 
     duration: 2000, 
     step: function (now) { 
      var canvas = document.getElementById('canvas'); 
      var context = canvas.getContext('2d'); 
      context.beginPath(); 
      context.moveTo (0, 0); 
      context.strokeStyle = '#ffff00'; 
      context.lineTo ($(this).position().left, $(this).position().top); 
      context.stroke(); 
     }, 
     complete: function() { 
      $('#a').animate({ 
       left: 100, 
       top: 0 
      }, 
      { 
       duration: 1000, 
       step: function (now) { 
        var canvas = document.getElementById('canvas'); 
        var context = canvas.getContext('2d'); 
        context.beginPath(); 
        context.moveTo (0, 0); 
        context.strokeStyle = '#ffff00'; 
        context.lineTo ($(this).position().left, $(this).position().top); 
        context.stroke(); 
       } 
      }); 
     } 
    }); 
}); 

在這裏你可以看到一個移動的格，始終遵循由一條線。但最後，我得到了一個實心的三角形 - 我不想要它，我不想成爲那條持久的線。因此，在繪製新圖時應刪除前一行 - 換句話說，將前一行設爲無效。 如何實現這一目標？

Answer 1

您需要清除每個繪圖的畫布。你畫線在此之前加入了一堆：

context.clearRect(0, 0, context.canvas.width, context.canvas.height); 

而且it will work。