Cainiao makes HTML5 games

After the previous article, I went on to make a splash again. Or first:

 

Start demo world:

1.css to draw the interface effect. ()

2. Principle: [Key] for the emergence of scratch card content ]. The Canvas area in the middle is used to achieve the scratch effect.

3. Build the interface effect. The zj of the background layer shows the effect. Canvas for animation

4. Start Animation

Draw the 'Gray 'first, then calculate the Moving coordinate value in the mouse moving event Canavas. onmousemove, and then clear the color of the coordinate using the clearRect method.

 window.onload =         imageWidth = "280"      imageheight = "140"                          Canavas = document.getElementById("CanvasLe"      Context2D = Canavas.getContext("2d"               bool =     Context2D.fillStyle='#cccccc';         Context2D.fillRect(0,0,imageWidth,imageheight);          Canavas.onmousemove =           canvasOffset =          canvasX = Math.floor(e.pageX -          canvasY = Math.floor(e.pageY -         canvasY +=                  c.clearRect(x,y-imageheight,20,20     }

Well, the effect is obvious. You can clear the pigment blocks according to the moving coordinates.

If you cannot run the above operation on a mobile phone device, you also need to add the touch screen sliding event touchmove. Next, listen to this event.

 Canavas.addEventListener('touchmove',                    (event.targetTouches.length == 1             event.preventDefault();              touch = event.targetTouches[0                           canvasOffset =              canvasX = Math.floor(touch.pageX -              canvasY = Math.floor(touch.pageY -       }, );

OK. The scratch effect is achieved.

You can further expand and learn together is the step of progress.

 

 

Supplement: thank you for pointing out that you must fix the source code quickly.

The test is successful. Why is the background: url ("s_bd.jpg") ineffective in IE11? Please give me some advice. Thank you first.

Find the source code and click [Fix] Here.