html，canvas，draw line while animate() of jQuery：我不希望它持久化答案

【问题标题】：html, canvas, drawing line while animate() of jQuery: I dont want it to be persistenthtml，canvas，draw line while animate() of jQuery：我不希望它持久化
【发布时间】：2013-11-16 04:03:33
【问题描述】：

让我们看看这个小提琴：

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

在这里你可以看到一个移动的 div，后面总是跟着一条线。但最后，我得到了一个实心三角形——我不想要它，我不想成为那条线的持久性。因此，在绘制新行时应该删除前一行 - 换句话说，取消前一行。如何实现？

【问题讨论】：

标签： jquery html canvas

【解决方案1】：

您需要为每次绘制清除画布。在画线之前将其添加到一堆中：

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

还有it will work。

【讨论】：