html5点击上传头像HTML5实例005像素作风头像生成器

function getIntRandom(alt, penSize) { return Math.floor(Math.random() alt/penSize) penSize;}

先在一个范围内天生须要的数字，然后放大相应的倍数不就好了吗？感谢大神，里手一脱手，就知有没有，这是真真滴，在我用while去让打算机做重复打算的时候，动下脑筋，用数学思维就可以轻松办理了呀。

连续实现那个画小正方形的东西吧，

1, 新建一个html，写入根本页面构造代码(为了等下方便阐明，给前面手工加了行号，要复制利用的话，想办法把最前面的行号得取掉)：

html5点击上传头像HTML5实例005像素作风头像生成器 Bootstrap

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返回 132085 //确定一行亮几个像素 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)`给算出来传了进去。
（这里如果不懂的话，没紧要，只要知道这个东西是个闭包，有兴趣的话，可以去搜索学习一下）

就这些了，先设法看到效果再说，不要怕里面不懂的地方。
（高能预警）个人以为哈，学编程就得拿来先用，先试试再说，然后再给解剖了，看看详细是怎么个实现的，用到了哪些知识点，再一个个小知识点地去把它给理解，化为已用，以是，不要以为有一个地方不懂或者做不出来的时候，就放手，及时搜索，及时乞助，及时考试测验。
和小孩子学说话一样，刚开始总会跑音，太正常了，学习本身便是一点点积累的过程。

就这样。
效果图再来一张，不然没法放封面呀。

神奇的封面