Using HTML5+JS to achieve pixel thunder like generator

In three steps, use HTML5+JS to implement the pixel Thunder Image Generator





HTML5 's canvas gives us a lot of space, but the pixel style avatar builder just uses the method of drawing squares. Draw a pixel avatar, as long as three steps, 1, solve the pixel point, 2, solve the relationship between the pixel points, 3, again and again to the portrait point.


draw a square first





in fact on the canvas is very simple to draw a square, as long as the page through JS to get a canvas, and then generate context, and then define the brush, and then on the painting on the good.





For example:





<canvas id= "MyCanvas" width= "height=" "style=" border:1px solid #d3d3d3; >


Your Browser does not support the HTML5 canvas tag.


</canvas>





a canvas in HTML, and then use JS to get to the canvas object.





var c = document.getElementById ("MyCanvas");





takes the context and sets some parameters, drawing the first pen: a small square:





var ctx=c.getcontext ("2d");


//define the brush as green,


ctx.fillstyle= "Green";


//(40,0) This place draws a solid rectangle with a length of 10 and a width of 10


Ctx.fillrect (40,0,10,10);





Here, the basics are there, can draw a rectangle, to draw a head, just use some squares as the head of the pixel, you can, and then add a loop, in different places to paint the same color, the same size of the box, it can be a head.


Head, is to the left and right symmetry.





This is also very simple to achieve, for example, I want to draw a 100*100 on the canvas some pixel 5px size of the box, if the left (5,0) where a square, and the symmetry of the right coordinates is: (100-5) -5px. To abstract this into a function for later use:





//Get the symmetry point from a point a


//Bring into ImgWidth and Pensize


//100/2 = 50


function Getsymmetry (A, imgwidth, pensize) {


return imgwidth-a-pensize;


}





then, from left to right to draw the box, how many times to draw? For example, 100 of the canvas, 5px size of the box, as long as the left to draw up to 10 times on it, of course, it is not all to the painting, and then all the canvas to dye the color, it is obvious that this is wrong, so it is necessary to generate a smaller than the specified value of a random integer value of a function:





//Returns an integer within the specified range passing in 3 returns 132


function Getremodint (alt) {


return Math.floor (Math.random () * alt) + 1;


}





here, with a symmetrical point, with the left to draw how many times this condition, but also to take the symmetry point, can draw a line of the square:





(function (RMD) {


Console.log (RMD);


for (var i = 0; i < RMD i++) {


var x1 = getremodintbypensize (IMGWIDTH/2, pensize);


//console.log (x1);


var x2 = getsymmetry (x1, ImgWidth, pensize);


ctx.fillrect (x1, YL, Pensize, pensize);


Ctx.fillrect (x2, YL, Pensize, pensize);


}


}) (Getremodint (IMGWIDTH/PENSIZE/2));





in the code above the Getremodintbypensize function is to generate a coordinate point, can be divided by the size of the brush (square size), because since a square as a pixel, it can not appear half a pixel point of this situation. This function is specifically implemented as:





function Getremodintbypensize (ALT, pensize) {


var RMD = 0;


while (true) {


RMD = Math.floor (Math.random () * alt);


if (rmd% pensize = = 0) {


return RMD;


}


}


}





a line of paintings, painting finished painting.





draw a line, then draw a line is not difficult to draw a lot of rows is also possible, based on the pixel mentioned just now, the increment value should be the size of the brush. So just put the code on the line in a for package and 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 = getsymmetry (x1, ImgWidth, pensize);


ctx.fillrect (x1, YL, Pensize, pensize);


Ctx.fillrect (x2, YL, Pensize, pensize);


}


}) (Getremodint (IMGWIDTH/PENSIZE/2));


}





here, basically a portrait can be painted.





Complete HTML here,





IE can not directly save what is painted directly as, so add the current canvas content into base64 format, and then give a <img> src, this way, you can save under IE.





Complete HTML inside also added a previous Avatar function, people, there is always a kind of standing in the mountains to see the high mountain mentality, so as a kind of orderly, provide a "ctrl+z" or excellent.





full HTML can be customized to the size of the head and brush size OH.





that's it, this is exactly 100 lines.