只要三步，使用html5+js實(shí)現(xiàn)像素風(fēng)頭像生成器

html5的畫(huà)布給我們帶來(lái)了很大的空間，其實(shí)像素風(fēng)格頭像生成器只是用到了畫(huà)方塊的方法。畫(huà)一個(gè)像素頭像，只要三步，1、解決像素點(diǎn)，2、解決像素點(diǎn)之間的關(guān)系，3、一次次地畫(huà)像素點(diǎn)。

先畫(huà)個(gè)方塊

其實(shí)在canvas上畫(huà)方塊非常簡(jiǎn)單，只要通過(guò)js在頁(yè)面上取得一個(gè)畫(huà)布，然后再生成上下文，再定義畫(huà)筆，然后再往上畫(huà)就好了。

比如：

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

your browser does not support the html5 canvas tag.

</canvas>

上面在html里面定義好了一個(gè)畫(huà)布，然后用js取到這個(gè)畫(huà)布對(duì)象。

var c = document.getelementbyid(mycanvas);

取到上下文，并且設(shè)置一些參數(shù)，畫(huà)下第一筆：一個(gè)小方塊：

var ctx=c.getcontext(2d);

//把畫(huà)筆定義成綠色，

ctx.fillstyle=green;

//在(40,0) 這個(gè) 地方 畫(huà)下 長(zhǎng)為10，寬也為10 的一個(gè)實(shí)心矩形

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

到這里，基礎(chǔ)的東西都有了，可以畫(huà)一個(gè)矩形了之后，要畫(huà)一個(gè)頭像，就只是用一些方塊做為頭像的像素點(diǎn)，就可以了，然后加入循環(huán)，在不同的地方畫(huà)下相同顏色，相同大小的方塊，就可以是一個(gè)頭像了。

頭像，是要左右對(duì)稱的。

這個(gè)也很簡(jiǎn)單可以實(shí)現(xiàn)，比如我要在一塊 100*100 的畫(huà)布上 畫(huà)一些像素點(diǎn)為 5px大小的 方塊的時(shí)候， 如果在左邊（5，0） 的地方畫(huà)了一個(gè)方塊的話，與之對(duì)稱的右邊的坐標(biāo)是： （100-5）-5px。把這個(gè)抽象成一個(gè)函數(shù)留作后用：

//從一個(gè)點(diǎn)a 拿到對(duì)稱點(diǎn)

//帶入imgwidth 與 pensize

// 100 / 2 = 50

function getsymmetry (a, imgwidth, pensize) {

return imgwidth -a - pensize;

}

然后呢，從左到右畫(huà)方塊的話，最多畫(huà)多少次呢？ 比如 100 的畫(huà)布，5px 大小的方塊的話，只要左邊畫(huà)最多10次就可以了，當(dāng)然，是不能全部都給畫(huà)了，那樣子又全部把畫(huà)布給染了一遍色，很明顯，這樣子是不對(duì)的，所以呢，是需要一個(gè)生成比指定值小的隨機(jī)整數(shù)值的一個(gè)函數(shù)：

//返回指定范圍以內(nèi)的整數(shù) 傳入3返回 132

function getremodint(alt) {

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

}

到這里，有了對(duì)稱點(diǎn)，有了在左邊畫(huà)多少次這個(gè)條件，還可以拿對(duì)稱點(diǎn)之后，是可以畫(huà)一行的方塊了的：

(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這個(gè)函數(shù)是為了生成一個(gè)坐標(biāo)點(diǎn)，能被畫(huà)筆大?。ǚ綁K大?。┱?，因?yàn)榧热灰粋€(gè)方塊做為一個(gè)像素點(diǎn)，是不能出現(xiàn)畫(huà)了半個(gè)像素點(diǎn)這種情況出現(xiàn)的。這個(gè)函數(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 ;

}

}

}

一行一行地畫(huà)，畫(huà)著畫(huà)著就畫(huà)完了。

畫(huà)了一行之后，再畫(huà)一行就不是什么難事了，畫(huà)很多行也是可以的，基于剛才提到的像素點(diǎn)的原因，做循環(huán)時(shí)遞增值應(yīng)為畫(huà)筆的大小。所以只要把上面畫(huà)一行的代碼用一個(gè)for包起來(lái)就 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));

}

到這里，基本上一個(gè)頭像是可以畫(huà)了的。

完整的html在這里，

ie不能直接把畫(huà)出來(lái)的東西直接另存為，所以加了把當(dāng)前畫(huà)布上的內(nèi)容轉(zhuǎn)為base64的格式，然后給一個(gè)<img>的src，這樣子，就可以在ie下另存了。

完整的html 里面還加入了 上一個(gè)頭像 的功能，人嘛，總有一種站在這山看那山高的心態(tài)的，所以作為一個(gè)好心的序員，提供一個(gè)“ctrl+z”還是極好的。

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

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