admin管理员组

文章数量:1430093

I have a canvas which has some lines drawn by mouse movement. I want the line to only last for a few seconds before removing itself. A bit like swirling a ribbon around where it has a set length. I am using lineTo to draw the lines in the canvas. I referenced a bit of the code from here.

The problem

I can clear the line by using clearRect() but this literally clears everything and the problem is that if the line intersects it clears the intersecting area too. here is my Fiddle click and drag inside the bottom right box:

/

clear rect would give me this:

In Summary

clearRect just wipes everything, I want to dynamically 'un draw' the line so it has a lifetime. And I can't for the life of me find something to do it....

Any help would be amazing!!!!

I have a canvas which has some lines drawn by mouse movement. I want the line to only last for a few seconds before removing itself. A bit like swirling a ribbon around where it has a set length. I am using lineTo to draw the lines in the canvas. I referenced a bit of the code from here.

The problem

I can clear the line by using clearRect() but this literally clears everything and the problem is that if the line intersects it clears the intersecting area too. here is my Fiddle click and drag inside the bottom right box:

http://jsfiddle/m2K5h/

clear rect would give me this:

In Summary

clearRect just wipes everything, I want to dynamically 'un draw' the line so it has a lifetime. And I can't for the life of me find something to do it....

Any help would be amazing!!!!

• javascript
• html
• canvas
• html5-canvas

Share Improve this question Follow edited Jan 26, 2012 at 11:46 James Jithin 10.6k66 gold badges4040 silver badges5252 bronze badges asked Jan 26, 2012 at 11:06 AlexAlex 3,79155 gold badges4040 silver badges6060 bronze badges 2

• for the record: you should never do something like this: brush = eval("new " + BRUSHES[0] + "(context)"); eval is in general evil, there's nearly nothing you can't do without using eval. the above example is equivalent to brush = BRUSHES[0](context) – zaphod1984 Commented Jan 26, 2012 at 19:15
• yeah I referenced the source from somewhere, where there were a lot of different brushes. There's a lot of code cleanup and rewriting I'm doing. Eval has saved my bacon a few times I have to say.. – Alex Commented Jan 27, 2012 at 2:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The canvas is a bitmap surface. Nothing in the canvas could indicate that your line has crossed itself, other than the pixel values.

In order to have a line un-draw itself, you need to store all the coordinates for the line as it is drawn. When it is time for the line to un-draw itself, you start an animation where every frame you clear the canvas and redraw a shrinking portion of the line.

jsfiddle example

If you have anything else of significant plexity that you wouldn't want to erase and redraw rapidly, put that in a second canvas behind the first.

本文标签： htmlClearing javascript canvas lineto with intersecting linesStack Overflow