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

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

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

先畫個方塊

其實在canvas上畫方塊很是簡單，只要經過js在頁面上取得一個畫布，而後再生成上下文，再定義畫筆，而後再往上畫就行了。

好比：

<canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

上面在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) {
  return imgWidth -a - penSize;
}

而後呢，從左到右畫方塊的話，最多畫多少次呢？ 好比 100 的畫布，5px 大小的方塊的話，只要左邊畫最多10次就能夠了，固然，是不能所有都給畫了，那樣子又所有把畫布給染了一遍色，很明顯，這樣子是不對的，因此呢，是須要一個生成比指定值小的隨機整數值的一個函數：

//返回指定範圍之內的整數 傳入3返回 132
function getRemodInt(alt) {
  return Math.floor(Math.random() * alt) + 1;
}

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

(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這個函數是爲了生成一個座標點，能被畫筆大小（方塊大小）整除的，由於既然一個方塊作爲一個像素點，是不能出現畫了半個像素點這種狀況出現的。這個函數具體實現爲：

function getRemodIntByPenSize (alt, penSize) {
  var rmd = 0;
  while (true) {
    rmd = Math.floor(Math.random() * alt);
    if (rmd % penSize === 0) {
      return rmd ;
    }
  }
}

一行一行地畫，畫着畫着就畫完了。

畫了一行以後，再畫一行就不是什麼難事了，畫不少行也是能夠的，基於剛纔提到的像素點的緣由，作循環時遞增值應爲畫筆的大小。因此只要把上面畫一行的代碼用一個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不能直接把畫出來的東西直接另存爲，因此加了把當前畫布上的內容轉爲base64的格式，而後給一個<img>的src，這樣子，就能夠在ie下另存了。

完整的html 裏面還加入了 上一個頭像 的功能，人嘛，總有一種站在這山看那山高的心態的，因此做爲一個好心的序員，提供一個「CTRL+Z」仍是極好的。

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

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