只要三步，使用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à)筆大小（方塊大?。┱?，因?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 了：

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。