3ステップでhtml 5+jsを用いて画素風アバタージェネレータを実現

3ステップでhtml 5+jsを用いて画素風アバタージェネレータを実現
html 5のキャンバスは私たちに大きな空間をもたらしましたが、実は画素スタイルのアバタージェネレータはブロックを描く方法を使っただけです.1つのピクセルの顔を描いて、3ステップだけで、1、ピクセルの点を解決して、2、ピクセルの点の間の関係を解決して、3、毎回ピクセルの点を描きます.
まず四角を描く
実は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);

ここまで来て、基礎のものはすべてあって、1つの矩形を描くことができて、1つの顔を描くことができて、ただいくつかのブロックを顔の画素の点にして、それから循環を加えて、異なる地方で同じ色を描いて、同じ大きさのブロック、1つの顔になることができます.
顔は、左右対称です.
これも簡単に実現できます.例えば、100*100のキャンバスに画素点5 pxサイズのブロックを描くとき、左側(5,0)にブロックを描くと、対称な右側の座標は:(100-5)-5 pxです.これを抽象化して関数として残します.

//    a      
//  imgwidth   penSize
// 100 / 2 = 50 
function getSymmetry (a, imgWidth, penSize) {
  return imgWidth -a - penSize;
}

それから、左から右に四角を描くと、何回まで描きますか.例えば100のキャンバス、5 pxの大きさのブロックは、左に最大10回描けばいいのですが、もちろん、全部描くわけにはいきません.そうすると、キャンバスを全部染めてしまいます.明らかに、これは間違っています.だから、指定値より小さいランダムな整数値を生成する関数が必要です.

//              3   132
function getRemodInt(alt) {
  return Math.floor(Math.random() * alt) + 1;
}

ここまで、対称点があって、左に何回描くかという条件があって、対称点を持ってから、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という関数は、1つの座標点を生成するために、ブラシサイズ(ブロックサイズ)で除去することができます.1つのブロックが1つの画素点である以上、半分の画素点を描くことはできません.この関数は、次のように具体的に実装されます.

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

1行ずつ描いて、描いているうちに描き終わった.
1行を描いた後、もう1行を描くのは難しいことではありません.多くの行を描くこともできます.さっき述べた画素点の原因に基づいて、サイクルを作るときに付加価値をブラシの大きさにする必要があります.上の行のコードを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));
}

ここまで来ると、基本的に1つのアイコンが描けるようになります.
完全なHTMLはここで、
ieは直接描いたものを保存することができないので、現在のキャンバスの内容をbase 64のフォーマットに変更し、<img>のsrcを追加すると、ieの下に保存することができます.
完全なhtmlの中には前のアイコンの机能も入っていて、人间は、いつもこの山に立ってその山の高さを见る心理状态があるので、親切な序员として、「CTRL+Z」を提供するのは素晴らしいです.
完全なhtmlはアイコンサイズとブラシサイズをカスタマイズできますよ.
そうしましょう.ここはちょうど100行です.