Очистка Javascript холста lineto с пересекающимися линиями

Question

У меня есть холст с линиями, нарисованными движением мыши. Я хочу, чтобы линия длилась всего несколько секунд, прежде чем удалить себя. Немного похоже на вращение ленты вокруг того места, где она имеет заданную длину. Я использую lineTo для рисования линий на холсте. Я сослался на код здесь.

Проблема

Я могу очистить линию с помощью clearRect (), но это буквально очищает все, и проблема в том, что, если линия пересекается, она очищает и пересекающуюся область. вот мой Fiddle, кликните и перетащите в нижнее правое поле:

http://jsfiddle.net/m2K5h/

Ясно, что прямоугольник даст мне это:

В итоге

clearRect просто стирает все, я хочу динамически «отрисовывать» линию, чтобы она имела время жизни. И я не могу ради жизни найти что-то, чтобы сделать это ...

Любая помощь была бы потрясающей !!!!

Answer 1

Холст является растровым изображением.Ничто на холсте не может указывать на то, что ваша линия пересекла себя, кроме значений в пикселях.

Чтобы линия не отрисовывалась сама, вам нужно сохранить все координаты линии, как она нарисована.,Когда пришло время отрисовать линию, вы запускаете анимацию, где каждый кадр очищает холст и перерисовывает уменьшающуюся часть линии.

jsfiddle пример

Если у вас есть что-то более сложное, что вы не хотите быстро стирать и перерисовывать, поместите это во второй холст позади первого.