前一篇里面的函数比较好的实现方式是：
function getIntRandom(alt, penSize) {
return Math.floor(Math.random() * alt/penSize) * penSize;
}
先在一个范围内生成需要的数字，然后放大相应的倍数不就好了吗？ 感谢大神，行家一出手，就知有没有，这是真真滴，在我用while去让计算机做重复计算的时候，动下脑子，用数学思维就可以轻松解决了呀。
继续实现那个画小正方形的东西吧，
1, 新建一个html，写入基础页面结构代码(为了等下方便解释，给前面手工加了行号，要复制使用的话，想办法把最前面的行号得取掉)：
001 <!doctype html>
002 <html lang="zh">
003 <head>
004 <meta charset="UTF-8">
005 <title>像素风头像生成器</title>
006 </head>
007 <body>
008 <div id="wrapper">
009 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
010 Your browser does not support the HTML5 canvas tag.
011 </canvas>
012 <p>
013 <a href="javascript:;" id="mkephoto" onclick="makePhoto();">生成</a>
014 </p>
015 </div>
016
017
018 <style type="text/css" media="screen">
019 html {
020 margin: 0;
021 padding: 0;
022 font: 62.5%/1 Georgia, "Microsoft Yahei", sans-serif;
023 }
024 body {
025 font: 1.2/1.5;
026 }
027
028 #wrapper {
029 margin: 5em auto;
030 text-align: center;
031 }
032
033 .ctlArea{
034 text-align: center;
035 border: 1px dashed #c0c0c0;
036 border-radius: 4px;
037 }
038
039 </style>
040 </body>
041 </html>
在第13行，给`<a>`标签加了`onclick`点击事件，直接调用`makePhoto`这个函数，接下来咱就去实现这个函数。
去行号的话，用正则表达式来可以：将`^\d\d\d `替换成没有就好了，再可以在列模式里面直接删除，放一张图吧，今天内容少，觉得编辑器好用的，去搜EverEdit，也可以给我私信，个人觉得在windows里面比sublime好使，关键对于编码这块支持很好（不是免费的）。
2, 在`</body>`前面直接写javascript部分：
039 </style>
040
041 <script type="text/javascript">
042
043
044 function makePhoto () {
045
046 var backColor = "transparent";
047 var imgWidth = 200;
048 var penSize = 40;
049 var penColor = "rgb("+getRemodInt(255)+","+getRemodInt(255)+","+getRemodInt(255)+")";
050 var c = document.getElementById("myCanvas");
051
052 c.width = imgWidth;
053 c.height = imgWidth;
054
055 var ctx=c.getContext("2d");
056 ctx.fillStyle="green";
057 //ctx.fillRect(40,0,10,10);
058
059 // x从cab 0-50 取 值，再拿这个值取到对称数，
060 // y 从0 到 100 做10 次增加
061
062 ctx.fillStyle = backColor;
063 //console.log(backColor);
064 ctx.fillRect(0, 0, imgWidth, imgWidth);
065 ctx.fillStyle = penColor;
066 for (var yl = 0; yl <= c.height; yl += penSize) {
067 (function(rmd){
068 console.log(rmd);
069 for (var i = 0; i < rmd; i++) {
070 var x1 = getRemodIntByPenSize(imgWidth , penSize);
071 ctx.fillRect(x1, yl, penSize, penSize);
072 //ctx.fillRect(x2, yl, penSize, penSize);
073 }
074 })(getRemodInt(imgWidth / penSize));
075 }
076
077 }
078
079 //返回一个在(0,Alt]区间的能被penSize整除的数
080 //确定具体亮哪几个像素
081 function getRemodIntByPenSize (alt, penSize) {
082 return Math.floor(Math.random() * alt / penSize) * penSize;
083 }
084 //返回指定范围以内的整数 传入3返回 132
085 //确定一行亮几个像素
086 function getRemodInt(alt) {
087 return Math.floor(Math.random() * alt) + 1;
088 }
089
090 makePhoto();
091 </script>
092 </body>
解释一下，
第44~77行是makePhoto函数，
46~49行定义了画布大小，背景颜色，像素大小，画笔颜色这些东西。
50行拿到了`canvas`，也就是画布，后面两行定义了画布的长宽。
62~64行把画布整个用背景色涂了一遍。
66~75行，用一个for循环确定要画的像素点的y坐标，就是一行一行地往下移动。
79~83行,84~88行的两个函数，一个负责确定这一行里面画出来几个像素，一个负责确定要画的这几个像素的x坐标放在哪。
67~74行，是一个闭包，确保每次循环过来的时候，内部执行的东西是一个独立的，不受上一次循环时候留下的一些变量影响。
69~73行，一个小循环，就是画一行的像素点，画几个由`rmd`这个值决定，`rmd`是要传入这个闭包函数的值，在74行调用的时候用`getRemodInt(imgWidth / penSize)`给算出来传了进去。（这里如果不懂的话，没关系，只要知道这个东西是个闭包，有兴趣的话，可以去搜索学习一下）
就这些了，先设法看到效果再说，不要怕里面不懂的地方。（高能预警）个人觉得哈，学编程就得拿来先用，先试试再说，然后再给解剖了，看看具体是怎么个实现的，用到了哪些知识点，再一个个小知识点地去把它给理解，化为已用，所以，不要觉得有一个地方不懂或者做不出来的时候，就放手，及时搜索，及时求助，及时尝试。和小孩子学说话一样，刚开始总会跑音，太正常了，学习本身就是一点点积累的过程。
就这样。效果图再来一张，不然没法放封面呀。
本文暂时没有评论，来添加一个吧(●'◡'●)