Z 您现在的位置:首页 > 手机软件 > 系统工具> 像素头像生成器app

像素头像生成器app

|像素头像生成器手机版下载

应用大小:未知应用平台:Andriod应用等级:

应用语言:简体中文更新时间:2017-10-10应用官网:

像素头像生成器软件apk最新版下载,像素头像生成器是一款非常好用的手机像素图片生成APP,各种图片帮你一键生成像素表情,快速在线制图,让你成为制图大师,完全免费在线使用哟!快来优游下载体验吧。

像素头像生成器软件介绍

1、包含各种不同的颜色;

2、提供百分之80界面的绘图区;

3、快速制图,小白用户变大师;

4、完全免费,下载即可永久使用。

像素头像生成器方法介绍

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

html5的画布给我们带来了很大的空间,其实像素风格头像生成器只是用到了画方块的方法。画一个像素头像,只要三步,1、解决像素点,2、解决像素点之间的关系,3、一次次地画像素点。

先画个方块

其实在canvas上画方块非常简单,只要通过js在页面上取得一个画布,然后再生成上下文,再定义画笔,然后再往上画就好了。

比如:our browser does not support the HTML5 canvas tag.

上面在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的格式,然后给一个的src,这样子,就可以在ie下另存了。

完整的html 里面还加入了 上一个头像 的功能,人嘛,总有一种站在这山看那山高的心态的,所以作为一个好心的序员,提供一个“CTRL+Z”还是极好的。

完整的html 是可以自定义头像大小与画笔大小的哦。

软件截图
  • 像素头像生成器app截图欣赏
  • 像素头像生成器app截图欣赏
  • 像素头像生成器app截图欣赏
相关下载
下载地址
网友评论

Copyright © 2019-2020 All rights reserved 350电竞网 版权所有

备案号:  技术支持:350电竞

350电竞网订阅号