Question

让我们看看这个小提琴：

$(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，总是后跟一条线。但最后，我得到了一个填充三角形 - 我不想要它，我不想成为那条线。所以当绘制一个新的时候应该删除前一行 - 换句话说，使前一行无效。如何实现？

Answer 1

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

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

it will work 。

html，canvas，绘制线而jQuery的animate（）：我不希望它持久化

1 个答案: