Canvas erase, Scratch card effect

Based on the HTML5 canvas technology to achieve the erase, scraping card effect, gently scraping the layer can simulate the real effect.

Principle: Draw a gray mask on the canvas element with canvas canvas and other APIs, and then draw a transparent graphic by listening to the user's mouse move or gesture, so that you can see the real picture (or background image) in the canvas background, which is the erase effect.

HTML: (Note that the canvas element is a HTML5 element, running on a modern browser that supports HTML5)
< Canvas ></ Canvas >

Javascript:
---1, disable the mouse on the page to select the drag (unchecked) event

--2, define the picture class, get the canvas element, and set the background and position properties

var img = new Image (); var canvas = document.queryselector (' canvas '); Canvas.style.backgroundColor = ' Transparent '; canvas.style.position = ' absolute ';  IMG.SRC = ' img/img.png ';   

--3, when the picture is loaded, define some properties and functions,

Layer (): Draw a gray square
Eventdown (): Press the event,
       Eventup (): Release event,
       Eventmove (): Move event,
       Arc (x, y, ten, 0, Math.PI * 2): Draw small Dots
）

Img.addeventlistener (' Load ', function (e) {//My understanding: Erase behavior can be done after you have ensured that the picture or background map after the canvas canvas has been loaded.     var ctx;     var w = img.width, h = img.height;     var OffsetX = canvas.offsetleft, OffsetY = canvas.offsettop;      var MouseDown = false;         function Layer (CTX) {Ctx.fillstyle = ' gray ';     Ctx.fillrect (0, 0, W, h);         } function Eventdown (e) {e.preventdefault ();     MouseDown = true;         } function Eventup (e) {e.preventdefault ();     MouseDown = false;         } function Eventmove (e) {e.preventdefault ();              if (MouseDown) {if (e.changedtouches) {e = e.changedtouches[e.changedtouches.length-1]; } var x = (E.clientx + document.body.scrollLeft | | e.pagex)-OffsetX | | 0, y = (e.clienty + document.body.scrollTop | | e.pagey)-OffsetY | |   0;  When the mouse is pressed or moved, the coordinate position with (CTX) {Beginpath () arc (x, y, 0, Math.PI * 2);    Draw Dot--(10: For dot size) fill ();  }         }     }     //Monitor Events ...
}); 

--4, canvas through call the above function, draw a graphic, and listen for touch and mouse events

canvas.width = w; canvas.height = h; canvas.style.backgroundImage = ' url (' + img.src + ') '; ctx = Canvas.getcontext (' 2 d '); Ctx.fillstyle = ' Transparent '; Ctx.fillrect (0, 0, W, h);     Draw a rectangle
Layer (CTX);    //Draw function

The level is limited, the error in the text is unavoidable, welcome to criticize the suggestion comment. The article will be modified on an irregular basis. Thank you!

Canvas Related blog Posts:

Canvas erase, Scratch card effect