只要三步，使用html5 js實現畫素風頭像生成器

html5的畫布給我們帶來了很大的空間，其實畫素風格頭像生成器只是用到了畫方塊的方法。畫乙個畫素頭像，只要三步，1、解決畫素點，2、解決畫素點之間的關係，3、一次次地畫畫素點。

其實在canvas上畫方塊非常簡單，只要通過js在頁面上取得乙個畫布，然後再生成上下文，再定義畫筆，然後再往上畫就好了。

比如：

your browser does not support the html5 canvas tag.

上面在html裡面定義好了乙個畫布，然後用js取到這個畫布物件。

var c = document.getelementbyid("mycanvas");

取到上下文，並且設定一些引數，畫下第一筆：乙個小方塊：

var ctx=c.getcontext("2d");
//把畫筆定義成綠色，
ctx.fillstyle="green";
//在(40,0) 這個 地方 畫下 長為10，寬也為10 的乙個實心矩形
ctx.fillrect(40,0,10,10);

到這裡，基礎的東西都有了，可以畫乙個矩形了之後，要畫乙個頭像，就只是用一些方塊做為頭像的畫素點，就可以了，然後加入迴圈，在不同的地方畫下相同顏色，相同大小的方塊，就可以是乙個頭像了。

這個也很簡單可以實現，比如我要在一塊 100*100 的畫布上畫一些畫素點為 5px大小的方塊的時候，如果在左邊（5，0）的地方畫了乙個方塊的話，與之對稱的右邊的座標是：（100-5）-5px。把這個抽象成乙個函式留作後用：

//從乙個點a 拿到對稱點
//帶入imgwidth 與 pensize
// 100 / 2 = 50 
function getsymmetry (a, imgwidth, pensize)

然後呢，從左到右畫方塊的話，最多畫多少次呢？比如 100 的畫布，5px 大小的方塊的話，只要左邊畫最多10次就可以了，當然，是不能全部都給畫了，那樣子又全部把畫布給染了一遍色，很明顯，這樣子是不對的，所以呢，是需要乙個生成比指定值小的隨機整數值的乙個函式：

//返回指定範圍以內的整數 傳入3返回 132
function getremodint(alt)

到這裡，有了對稱點，有了在左邊畫多少次這個條件，還可以拿對稱點之後，是可以畫一行的方塊了的：

(function(rmd)
})(getremodint(imgwidth / pensize / 2));

上面**裡面的getremodintbypensize這個函式是為了生成乙個座標點，能被畫筆大小（方塊大小）整除的，因為既然乙個方塊做為乙個畫素點，是不能出現畫了半個畫素點這種情況出現的。這個函式具體實現為：

function getremodintbypensize (alt, pensize) 
}}

畫了一行之後，再畫一行就不是什麼難事了，畫很多行也是可以的，基於剛才提到的畫素點的原因，做迴圈時遞增值應為畫筆的大小。所以只要把上面畫一行的**用乙個for包起來就 ok 了：

for (var yl = 0;  yl <= imgwidth; yl += pensize) 
})(getremodint(imgwidth / pensize / 2));
}

到這裡，基本上乙個頭像是可以畫了的。

完整的html在這裡，

ie不能直接把畫出來的東西直接另存為，所以加了把當前畫布上的內容轉為base64的格式，然後給乙個

的src，這樣子，就可以在ie下另存了。

完整的html 裡面還加入了上乙個頭像的功能，人嘛，總有一種站在這山看那山高的心態的，所以作為乙個好心的序員，提供乙個「ctrl+z」還是極好的。

完整的html 是可以自定義頭像大小與畫筆大小的哦。

就這樣吧，這裡正好是100行。