Очистка javascript canvas lineto с пересекающимися линиями

Question

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

Проблема

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

http://jsfiddle.net/m2K5h/

ясно Прямоугольник бы мне это:

В сводке

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

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

Answer 1

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

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

jsfiddle example

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