Use html5 + js to implement the pixel wind Avatar generator in three steps.

Use html5 + js to implement the pixel wind Avatar generator in three steps.
In just three steps, using html5 + js to implement the canvas of the pixel style avatar generator html5 brings us a lot of space. In fact, the pixel style avatar generator only uses the method of drawing blocks. Draw a pixel avatar, as long as three steps, 1. Solve the pixel, 2. Solve the relationship between the pixel, 3. Draw the pixel again and again. It is very easy to draw a square on the canvas. You only need to get a canvas through js on the page, then generate the context, define the paint brush, and then draw it up. For example, <canvas id = "myCanvas" width = "100" height = "100" style = "border: 1px solid # d3d3d3; "> Your browser does not support the HTML5 canvas tag. </canvas> a canvas is defined in html and obtained by js. Var c = document. getElementById ("myCanvas"); get the context, set some parameters, and draw the first one: a small square: var ctx = c. getContext ("2d"); // defines the paint brush as green and ctx. fillStyle = "green"; // a solid rectangle ctx with a length of 10 and a width of 10. fillRect (40, 0, 10, 10); here, all the basic things are available. After you can draw a rectangle, you just need to draw an avatar using some squares as the pixel points of the Avatar, then we can add a loop and draw blocks of the same color and size in different places to create an avatar. The portrait is symmetric between the left and right sides. This is easy to implement. For example, if I want to draw blocks with pixels of 5 PX on a 100*100 canvas) if a square is drawn, the coordinate on the right of the symmetry is (100-5)-5px. Abstract This function into a function and use it: // obtain the symmetric point from Vertex a // bring imgwidth and penSize // 100/2 = 50 function getpolicry (a, imgWidth, penSize) {return imgWidth-a-penSize;} How many times can I draw a square from left to right? For example, for a canvas of 100 and a square of 5px size, you only need to draw a maximum of 10 times on the left. Of course, you cannot draw all of them, as a result, all the canvases are colored again. Obviously, this is incorrect. Therefore, a function is required to generate a random integer that is smaller than the specified value: // return an integer within the specified range. 3 is returned. The 132 function getRemodInt (alt) {return Math. floor (Math. random () * alt) + 1;} here, with the symmetry point, how many times has this condition been drawn on the left, and after the symmetry point can be obtained, you can draw a line of blocks: (function (rmd) {console. log (rmd); for (var I = 0; I <rmd; I ++) {var x1 = getRemodIntByPenSize (imgWidth/2, penSize); // console. log (x1); var x2 = getS Yry ry (x1, imgWidth, penSize); ctx. fillRect (x1, yl, penSize, penSize); ctx. fillRect (x2, yl, penSize, penSize) ;}} (getRemodInt (imgWidth/penSize/2); The getRemodIntByPenSize function in the above code is used to generate a coordinate point, it can be divisible by the size of the paint brush (the size of the square), because since a square is regarded as a pixel, it cannot be painted with half a pixel. The specific implementation of this function is: function getRemodIntByPenSize (alt, penSize) {var rmd = 0; while (true) {rmd = Math. floor (Math. random () * alt); if (rmd % penSize = 0) {return rmd ;}} draws one row at a time. After painting, the painting is finished. After drawing a row, it is not difficult to draw another row. It is also possible to draw many rows. Based on the pixel reasons mentioned above, the incremental value during loop should be the size of the brush. So you just need to package the above line of code with a for package. OK: for (var yl = 0; yl <= imgWidth; yl + = penSize) {(function (rmd) {console. log (rmd); for (var I = 0; I <rmd; I ++) {var x1 = getRemodIntByPenSize (imgWidth/2, penSize); // console. log (x1); var x2 = getry ry (x1, imgWidth, penSize); ctx. fillRect (x1, yl, penSize, penSize); ctx. fillRect (x2, yl, penSize, penSize) ;}) (getRemodInt (imgWidth/penSize/2);} here, it's basically the first thing we can do. Painted. The complete HTML here, ie cannot directly Save the drawn content as a base64 format, so it adds the content on the current canvas to a src, in this way, you can save it in ie. The complete html contains the function of adding an Avatar. People, there is always a kind of mentality to stand on this hill to see the height of the hill, so as a kind of good sort, it is excellent to provide a "CTRL + Z. The complete html can be used to customize the Avatar size and brush size.