Original: Make the password no longer forgotten-try the graphic password on the web!

A few days ago, I upgraded my mobile phone to Android 4.0. I accidentally found that I had another screen unlock method: graphic password.

There are nine dots on the screen, arranged in a 3*3 matrix. With these nine dots as nodes, you can draw a geometric shape and write down the Dynamic Path of the geometric shape, the next time you unlock the screen, you can draw this shape based on your memory, even if the screen is successfully unlocked!

After the experience, I feel good and have some playability.

More importantly, the brain is more advantageous in memorizing a figure than a string of boring characters. This helps avoid forgetting the password.

Now I want to implement this graphic password on the web, so it is a good thing to make another choice for the Web Password.

It's easy to do.

First, I used PS to draw a basemap with 16 dots on it, arranged in a 4*4 matrix. Why should I use 4*4? The Matrix of 3*3 feels a little small, the combination is also relatively simple. 4*4, the security is relatively higher. In addition, 16 nodes can use hexadecimal 0 ~ 9 and ~ F. If it is bigger, for example, 5*5, it seems a little too complicated, even if it is difficult to remember the graphics you have drawn, it will not be worth the candle.

Basemap:

Haha, not bad. I feel very beautiful :)

 

Write the script after the basemap is completed.

Drawing a line on the Web is not the first time. Considering compatibility with IE, ff, and opera, first pass the VML, PNG, and other methods. As for SVG, the old version of IE is not very friendly, but I still gave up. Flash is a good choice, but it is too troublesome. Finally, I decided to use the original method: JS + Div

After more than three hours of hitting and hitting, the new web-based graphic password is just a success!

Effect preview:

 

Click OK to return the original password:

 

The preview effect is added when the dashes are crossed, which is much better.

The graphic password of the web version is fixed. It is easy to embed it into a project. I will not describe it here.

Attachment: http://files.cnblogs.com/netwild/graphic password (drawpass#.zip