首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 新闻阅读 > 正文

    迷你世界像素生成器 [使用html5+js实现像素风头像生成器]

    时间：2018-08-10来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

     只要三步，使用html5+js实现像素风头像生成器

    html5的画布给我们带来了很大的空间，其实像素风格头像生成器只是用到了画方块的方法。画一个像素头像，只要三步，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);

    到这里，基础的东西都有了，可以画一个矩形了之后，要画一个头像，就只是用一些方块做为头像的像素点，就可以了，然后加入循环，在不同的地方画下相同颜色，相同大小的方块，就可以是一个头像了。
    头像，是要左右对称的。

    这个也很简单可以实现，比如我要在一块 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行。

    • 迷你世界像素生成器 [使用html5+js实现像素风头像生成器] 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文迷你世界像素生成器 [使用html5+js实现像素风头像生成器] 由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.