Use html5 to achieve the graffiti effect? _html/css_WEB-ITnose

[img=C:UsersrootDesktop video playback][/img]

Is there any hero who has done this effect? ​​Please give me some ideas, ask for help, wait online, it’s urgent! !

Reply to discussion (solution)

Is it like a handwriting tablet? ? ? If so, you can use Canvas to do it

Well, yes, it is equivalent to having two pictures. Wherever the mouse slides on the upper layer, the second picture will be displayed

Well, yes, it’s like having two pictures. Wherever you slide the mouse on the upper layer, the second picture will be displayed

You said it so clearly. What other ideas are there?

You can refer to the following URL, the above drawing may be useful to you
http://hi.baidu.com/xxfaxy/item/884a1cbeed0fc8ea4ec7fd13

Quote from 2nd Floor’s reply:

Well, yes, it’s like having two pictures. Wherever you slide the mouse on the upper layer, the second picture will be displayed


You said it so clearly. What more ideas do you need to be clear?

What I’m talking about is the idea of ​​doing it. .

Assuming that canvas is used to implement
First of all, you need to confirm what the [size, shape] of your eraser is.
That is, if it is viewed as a rectangle, the coordinates of those pixels are the erasing area

Then draw the first picture on canvas1 and draw the second picture on another hidden canvas2
If the eraser is pulled on canvas1, then the coordinates of all the pixel points of the eraser area corresponding to the eraser on canvas2 are drawn to canvas1 Go to

to refer to the URL below, the drawing above may be useful to you
http://hi.baidu.com/xxfaxy/item/884a1cbeed0fc8ea4ec7fd13www.seo7ye.com