只要三步，使用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行。