Own implementation of a scratch

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

  See a friend a realization of their own scratch today, feel very fun on the next down have a look, the results can not run, it is not too difficult to determine their own implementation of a, spent some time, source code download link at the bottom (this is definitely useful, unless your browser does not support canvas). Nonsense not say, explain several important points.:

One, first of all is the scratch card effect, naturally think of two layer, so I used the two overlapping canvas

        <canvas id="back" width="400px" height="200px" border="2px"></canvas>
        <canvas id="front" width="400px" height="200px" border="2px"></canvas>

  The back is used to display the text information below, shows that the coating. We deal only with front. We just in back rendering, front above a layer of silver coating:

1 Canvas.fillRect(back,0,0,400,200,"gold")
2             Canvas.drawText(back,"Thanks for your patronage",60,120,"black");
3             Canvas.fillRect(front,0,0,400,200,"silver");

In two, the event monitor, In order to facilitate I did not use mobile phone terminal, So using both mouse events, Scratch is to remove a layer above, This we naturally think of clearRect, So the event processing method is also very simple is processed to scrape off where the table, The simplest is to capture each mouse to point and then clear a, But if the block is too big it will result in very ugly, Soon there will be a breakpoint is too small, This is a breakpoint is a problem, I use the method of recording the last point is connected with an all clear, This effect is very good. The following code:

 1 function mouseDown(e){
 2                 e.preventDefault();
 3                 isDown=true;
 4             }
 5             function mouseUp(e){
 6                 e.preventDefault();
 7                 isDown=false;
 8                 isFirst=true;
 9             }
10             function mouseMove(e) {
11                 e.preventDefault();
12                 if(e.clientX>480+400||e.clientX<480+0||e.clientY<0+260||e.clientY>200+260){
13                     isDown=false;
14                 }
15                 if(isDown){
16                     if(isFirst){
17                         front.clearRect(e.clientX-480,e.clientY-260,10,10);
18                         prex=e.clientX-480;
19                         prey=e.clientY-260;
20                         isFirst=false;
21                     }
22                     else{
23                         if(e.clientX-480>prex){
24                             var k=(e.clientY-260-prey)/(e.clientX-480-prex);
25                             var i=0;
26                             for(i=prex;i<e.clientX-480;i+=5){
27                                 front.clearRect(i,i*k+prey-k*prex,10,10);
28                             }
29                         }
30                         else{
31                             var k=(e.clientY-260-prey)/(e.clientX-480-prex);
32                             var i=0;
33                             for(i=prex;i>e.clientX-480;i-=5){
34                                 front.clearRect(i,i*k+prey-k*prex,10,10);
35                             }
36                         }
37                         prex=e.clientX-480;
38                         prey=e.clientY-260;
39                     }
40                 }

  Although it is very simple to implement, but also had to. But I want to further realize something has encountered a problem, first of all is this thing how to adjust or see a little jagged, another is how to recognize you have scraped out (considered identification has been across the point, but this feeling is not very good, so I hope) solution of Yuanyou enlighten.

Download the source code

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Brook at December 13, 2013 - 6:31 PM