Tutorial on using HTML5 to achieve the eraser smearing effect_html5 tutorial skills

This effect has just been used in a recent project, which is a bit like a scratch card. On a mobile device, a picture is scratched off to display another picture. The rendering is as follows:

DEMO please click on the right: DEMO
This is quite common on the Internet. I originally wanted to just find a demo online and apply his method. After applying it, I found out that in android Because of customer requirements, it is not required to be particularly smooth on Android, at least it must be playable, but the demo I found online is too laggy and cannot be played at all. So I just wanted to write one myself, and this article is just for recording the research process.

The first thing that comes to mind for this scraping effect is to use the HTML5 canvas. In the canvas API, the clearRect method that can clear pixels is the clearRect method, but the clearRect method clears the area rectangle. After all, most people are used to it. Erasers are all round, so the powerful function of the clipping area is introduced, which is the clip method. Usage is very simple:

XML/HTML CodeCopy content to clipboard

1. ctx.save()
2. ctx.beginPath()
3. ctx.arc(x2,y2,a,0,2*Math.PI);
4. ctx.clip()
5. ctx.clearRect(0,0,canvas.width,canvas.height);
6. ctx.restore();

The above code realizes the erasure of a circular area, that is, first implements a circular path, and then uses this path as the clipping area, and then clears the pixels. One thing to note is that you need to save the drawing environment first, and reset the drawing environment after clearing the pixels. If you do not reset, future drawings will be limited to that clipping area.

Now that the erasing effect is there, now it’s time to write the erasing effect of mouse movement. I’ll use the mouse to describe it below, because the mobile version is similar, that is, replace mousedown with touchstart, mousemove with touchmove, and mouseup with touchend. , and the coordinate point acquisition is changed from e.clientX to e.targetTouches[0].pageX.

To implement mouse movement erasure, I first thought of erasing the circular area where the mouse is located in the mousemove event triggered when the mouse moves. After writing it out, I found that when the mouse moves very fast, the erased The area is no longer coherent, and the following effect will appear. This is obviously not the eraser effect we want.

Since all the points are incoherent, the next thing to do is to connect these points. If you are implementing the drawing function, you can directly connect the two points through lineTo and then draw, but the erasure effect is The clipping area requires a closed path. If you simply connect two points, the clipping area cannot be formed. Then I thought of using calculation methods to calculate the four endpoint coordinates of the rectangles in the two erasing areas, which is the red rectangle in the picture below:

The calculation method is also very simple, because we can know the coordinates of the two endpoints of the line connecting the two clipping areas, and also know how wide the line we want, the coordinates of the four endpoints of the rectangle become easy to find, so there is Code below:
XML/HTML CodeCopy content to clipboard

1. var aasin = a*Math.sin(Math.atan((y2-y1)/(x2- x1)));
2. var aacos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)) )
3. var x3 = x1 asin;
4. var y3 = y1-acos;
5. var x4 = x1-asin;
6. var y4 = y1 acos;
7. var x5 = x2 asin;
8. var y5 = y2-acos;
9. var x6 = x2-asin;
10. var y6 = y2 acos;

　x1, y1 and x2, y2 are the two endpoints, thus the coordinates of the four endpoints are obtained. In this way, the clipping area is a circle plus a rectangle, and the code is organized as follows:
XML/HTML CodeCopy the content to the clipboard

1. var hastouch = "ontouchstart" in window?true:false,//determine whether For mobile devices
2.  tapstart = hastouch?"touchstart":"mousedown", 
3.  tapmove = hastouch?"touchmove":"mousemove", 
4.  tapend = hastouch?"touchend":"mouseup";
6. canvas.addEventListener(tapstart , function(e){
7. e.preventDefault();
8.  
9.  x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft ;
10.  y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop ;
11.  
12. // Erase a circular area when the mouse is clicked for the first time, and record the first coordinate point at the same time
13. ctx.save()
14. ctx.beginPath()
15. ctx.arc(x1,y1,a,0,2*Math.PI);
16. ctx.clip()
17. ctx.clearRect(0,0,canvas.width,canvas.height);
18. ctx.restore();
19.  
20. canvas.addEventListener(tapmove, tapmoveHandler);
21. canvas.addEventListener(tapend, function(){
22. canvas.removeEventListener(tapmove, tapmoveHandler);
23. });
24. //This event is triggered when the mouse moves
25. function tapmoveHandler(e){
26. e.preventDefault()
27.  x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft ;
28.  y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop ;
29.  
30. //Get the four endpoints of the clipping area between two points
31. var aasin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)) );
32. var aacos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)) )
33. var x3 = x1 asin;
34. var y3 = y1-acos;
35. var x4 = x1-asin;
36. var y4 = y1 acos;
37. var x5 = x2 asin;
38. var y5 = y2-acos;
39. var x6 = x2-asin;
40. var y6 = y2 acos;
41.  
42. // Ensure the continuity of the lines, so draw a circle at one end of the rectangle
43. ctx.save()
44. ctx.beginPath()
45. ctx.arc(x2,y2,a,0,2*Math.PI);
46. ctx.clip()
47. ctx.clearRect(0,0,canvas.width,canvas.height);
48. ctx.restore();
49.  
50. // Clear the pixels in the rectangular clipping area
51. ctx.save()
52. ctx.beginPath()
53. ctx.moveTo(x3,y3);
54. ctx.lineTo(x5,y5);
55. ctx.lineTo(x6,y6);
56. ctx.lineTo(x4,y4);
57. ctx.closePath();
58. ctx.clip()
59. ctx.clearRect(0,0,canvas.width,canvas.height);
60. ctx.restore();
61.  
62. //Record the last coordinates
63. x1 = x2;
64. y1 = y2;
65. }
66. })

In this way, the mouse erasing effect is achieved, but there is another point to be achieved, which is the effect of most erasing. When you erase a certain number of pixels, all the image content will be automatically Shown, this effect, I use imgData to achieve. The code is as follows:
Copy code

XML/HTML CodeCopy content to clipboard

1. var imgData = ctx.getImageData(0,0,canvas.width,canvas. height);
2. var dd = 0;
3. for(var x=0;ximgData.width;x =1){
4. for(var y=0;yimgData.height;y =1){
5. var i = (y*imgData.width x)*4;
6. if(imgData.data[i 3] > 0){
7. dd dd
8.                                                               
}
}
if(dd/(imgData.width*imgData.height)
11. 0.4){
12. canvas.className = "noOp";
}

Obtain imgData, traverse the pixels in imgData, and then analyze the alpha in rgba in the data array of imgData, that is, analyze the transparency. If the pixel is erased, the transparency will be 0, that is It is to compare the number of pixels with non-zero transparency in the current canvas to the total number of pixels on the canvas. If the proportion of pixels with non-zero transparency is less than 40%, it means that there will be more than 60% of the area on the current canvas. Once erased, the picture can be automatically presented.

Note here that I put the code for checking pixels in the mouseup event, because the amount of calculation is relatively large. If the user clicks the mouse wildly, the mouseup event will be triggered wildly, which means he will be crazy. Triggering that loop to calculate pixels, the amount of calculation is so large that it blocks the process and causes the interface to get stuck. The solution is as follows: add a timeout to delay the execution of the pixel calculation, and clear the timeout every time the user clicks, that is, if the user clicks for a long time Quickly, this calculation will no longer be triggered. Another way to improve is to do random inspections. The way I wrote it above is to check pixel by pixel. If the number of pixels is too large, it will definitely get stuck, so you can use random inspection, such as Check every 30 pixels. The modified code is as follows:
Copy code

XML/HTML CodeCopy content to clipboard

1. timeout = setTimeout(function(){
2. var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
3. var dd = 0;
4. for(var x=0;ximgData.width;x =30){
5. for(var y=0;yimgData.height;y =30){
6. var i = (y*imgData.width x)*4;
7. if(imgData.data[i 3] >0){
8. dd dd
9.                                                                 
                                                              
10. }
11. if(dd/(imgData.width*imgData.height/900)
0.4){ canvas.className
12. = "noOp"; }
13. },100)

14. This can prevent users from clicking wildly to the greatest extent. If there are other better checking methods, please give your opinions, thank you.

    At this step, everything was written, and then it was time to test. The results were not optimistic. It was still stuck on android, so I had to think of another way. Finally, I discovered the globalCompositeOperation attribute in the drawing environment. The default value of this property is source-over, that is, it will be overlaid when you draw on existing pixels, but there is also a property called destination-out. The official explanation is: display the destination image outside the source image. Only the portion of the target image outside the source image will be displayed, and the source image is transparent. It seems hard to understand, but in fact, if you test it yourself, you will find that it is very simple. That is, when you draw based on existing pixels, the existing pixels in the area you draw will be made transparent. You can change it directly by looking at the picture. Easy to understand:
    

    Illustration of the effect of globalCompositeOperation attribute.
    With this attribute, it means that there is no need to use clip, and there is no need to use sin or cos to calculate the clipping area. Just use a thick line, which can greatly reduce the cost. The amount of calculation is reduced, and the calls to the drawing environment API are reduced. The performance is improved, and running on Android should be much smoother. The following is the modified code:

    
    

    XML/HTML CodeCopy content to clipboard

    1. //Achieve erasure effect by modifying globalCompositeOperation
    2. function tapClip(){
    3. var hastouch = "ontouchstart" in window?true:false,
    4.  tapstart = hastouch?"touchstart":"mousedown", 
    5.  tapmove = hastouch?"touchmove":"mousemove", 
    6. tapend = hastouch?"touchend":"mouseup";
    7.  
    8. canvas.addEventListener(tapstart, function(e){
    9. clearTimeout(timeout)
    10. e.preventDefault();
    11.  
    12.  x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft ;
    13.  y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop ;
    14.  
    15.  ctx.lineCap = "round"; //Set both ends of the line as arcs
    16.  ctx.lineJoin = "round"; //Set the line turning to arc
    17. ctx.lineWidth = a*2;
    18. ctx.globalCompositeOperation = "destination-out";
     
    ctx.save();
    ctx.beginPath()
    ctx.arc(x1,y1,1,0,2*Math.PI);
    ctx.fill();
    ctx.restore();
     
    canvas.addEventListener(tapmove, tapmoveHandler);
    canvas.addEventListener(tapend, function(){
    canvas.removeEventListener(tapmove, tapmoveHandler);
                                                           
    29. 　　　
    timeout
    30. = setTimeout(function(){
    31.             var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);   
    32.             var dd = 0;   
    33.             for(var x=0;ximgData.width;x =30){   
    34.                 for(var y=0;yimgData.height;y =30){   
    35.                       var i = (y*imgData.width   x)*4;   
    36.                     if(imgData.data[i 3] > 0){   
    37.                         dd   
    38.                     }   
    39.                 }   
    40.             }   
    41.             if(dd/(imgData.width*imgData.height/900)0.4){   
    42.                 canvas.className = "noOp";   
    43.             }   
    44. 　　　　　　　},100)   
    45.         });   
    46.         function tapmoveHandler(e){   
    47.             e.preventDefault()   
    48.             x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;   
    49.             y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;   
    50.                
    51.             ctx.save();   
    52.             ctx.moveTo(x1,y1);   
    53.             ctx.lineTo(x2,y2);   
    54.             ctx.stroke();   
    55.             ctx.restore()   
    56.                
    57.             x1 = x2;   
    58.             y1 = y2;   
    59.         }   
    60.     })   
    61. }   

    　　擦除那部分代码就这么一点，也就相当于画图功能，直接设置line属性后通过lineTo进行绘制线条，只要事前把globalCompositeOperation设成destination-out，你所进行的一切绘制，都变成了擦除效果。鼠标滑动触发的事件里面代码也少了很多，绘图对象的调用次数减少了，计算也减少了，性能提升大大滴。

    　　改好代码后就立即用自己的android机子测试了一下，果然如此，跟上一个相比，流畅了很多，至少达到了客户要求的能玩的地步了。

    　　源码地址：https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Funny-demo/clip/clip.html