Rimozione della tela di comando javascript con linee intersecanti

Question

Ho una tela con alcune linee disegnate dal movimento del mouse. Voglio che la linea duri solo pochi secondi prima di rimuoverla. Un po 'come roteare un nastro intorno a dove ha una lunghezza impostata. Sto usando lineTo per disegnare le linee nella tela. Ho fatto riferimento a un po 'del codice da qui.

Il problema

posso cancellare la linea utilizzando clearRect(), ma questo cancella letteralmente tutto e il problema è che se la linea interseca cancella l'area di intersezione troppo. qui è il mio violino clic e trascinare all'interno della scatola in basso a destra:

http://jsfiddle.net/m2K5h/

chiaro rect mi avrebbe dato questo:

In sintesi

clearRect solo salviette tutto, vuoi "dinamicamente" tracciare la linea in modo che abbia una vita. E non posso per la vita di me trovare qualcosa per farlo ...

Qualsiasi aiuto sarebbe fantastico !!!!

Answer 1

L'area di disegno è una superficie bitmap. Nulla nella tela potrebbe indicare che la linea si è incrociata, a parte i valori dei pixel.

Per poter disassemblare una linea, è necessario memorizzare tutte le coordinate della linea come viene disegnata. Quando è il momento che la linea si disorienta da sola, si avvia un'animazione in cui ogni fotogramma si cancella la tela e ridisegna una parte restringente della linea.

jsfiddle example

Se avete niente altro di notevole complessità, che non si vuole cancellare e ridisegnare rapidamente, che mettere in una seconda tela dietro al primo.