只要三步，使用html5+js實(shí)現(xiàn)像素風(fēng)頭像生成器
    html5的畫布給我們帶來了很大的空間，其實(shí)像素風(fēng)格頭像生成器只是用到了畫方塊的方法。畫一個像素頭像，只要三步，1、解決像素點(diǎn)，2、解決像素點(diǎn)之間的關(guān)系，3、一次次地畫像素點(diǎn)。
    先畫個方塊
    其實(shí)在canvas上畫方塊非常簡單，只要通過js在頁面上取得一個畫布，然后再生成上下文，再定義畫筆，然后再往上畫就好了。
    比如：
    <canvas id="myCanvas" width="100" height="100">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
    上面在html里面定義好了一個畫布，然后用js取到這個畫布對象。
    var c = document.getElementById("myCanvas");
    取到上下文，并且設(shè)置一些參數(shù)，畫下第一筆：一個小方塊：
    var ctx=c.getContext("2d");
    //把畫筆定義成綠色，
    ctx.fillStyle="green";
    //在(40,0) 這個 地方 畫下 長為10，寬也為10 的一個實(shí)心矩形
    ctx.fillRect(40,0,10,10);
    到這里，基礎(chǔ)的東西都有了，可以畫一個矩形了之后，要畫一個頭像，就只是用一些方塊做為頭像的像素點(diǎn)，就可以了，然后加入循環(huán)，在不同的地方畫下相同顏色，相同大小的方塊，就可以是一個頭像了。
    頭像，是要左右對稱的。
    這個也很簡單可以實(shí)現(xiàn)，比如我要在一塊 100*100 的畫布上 畫一些像素點(diǎn)為 5px大小的 方塊的時候， 如果在左邊（5，0） 的地方畫了一個方塊的話，與之對稱的右邊的坐標(biāo)是： （100-5）-5px。把這個抽象成一個函數(shù)留作后用：
    //從一個點(diǎn)a 拿到對稱點(diǎn)
    //帶入imgwidth 與 penSize
    // 100 / 2 = 50
    function getSymmetry (a, imgWidth, penSize) {
    return imgWidth -a - penSize;
    }
    然后呢，從左到右畫方塊的話，最多畫多少次呢？ 比如 100 的畫布，5px 大小的方塊的話，只要左邊畫最多10次就可以了，當(dāng)然，是不能全部都給畫了，那樣子又全部把畫布給染了一遍色，很明顯，這樣子是不對的，所以呢，是需要一個生成比指定值小的隨機(jī)整數(shù)值的一個函數(shù)：
    //返回指定范圍以內(nèi)的整數(shù) 傳入3返回 132
    function getRemodInt(alt) {
    return Math.floor(Math.random() * alt) + 1;
    }
    到這里，有了對稱點(diǎn)，有了在左邊畫多少次這個條件，還可以拿對稱點(diǎn)之后，是可以畫一行的方塊了的：
    (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));
    上面代碼里面的getRemodIntByPenSize這個函數(shù)是為了生成一個坐標(biāo)點(diǎn)，能被畫筆大?。ǚ綁K大?。┱?，因?yàn)榧热灰粋€方塊做為一個像素點(diǎn)，是不能出現(xiàn)畫了半個像素點(diǎn)這種情況出現(xiàn)的。這個函數(shù)具體實(shí)現(xiàn)為：
    function getRemodIntByPenSize (alt, penSize) {
    var rmd = 0;
    while (true) {
    rmd = Math.floor(Math.random() * alt);
    if (rmd % penSize === 0) {
    return rmd ;
    }
    }
    }
    一行一行地畫，畫著畫著就畫完了。
    畫了一行之后，再畫一行就不是什么難事了，畫很多行也是可以的，基于剛才提到的像素點(diǎn)的原因，做循環(huán)時遞增值應(yīng)為畫筆的大小。所以只要把上面畫一行的代碼用一個for包起來就 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));
    }
    到這里，基本上一個頭像是可以畫了的。
    完整的HTML在這里，
    ie不能直接把畫出來的東西直接另存為，所以加了把當(dāng)前畫布上的內(nèi)容轉(zhuǎn)為base64的格式，然后給一個<img>的src，這樣子，就可以在ie下另存了。
    完整的html 里面還加入了 上一個頭像 的功能，人嘛，總有一種站在這山看那山高的心態(tài)的，所以作為一個好心的序員，提供一個“CTRL+Z”還是極好的。
    完整的html 是可以自定義頭像大小與畫筆大小的哦。
    就這樣吧，這里正好是100行。