只要三步,使用html5+js实现像素风头像生成器
只要三步,使用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实现像素风头像生成器相关推荐
- html绘制图形的关键三步,基于HTML5的绘图——绘制简单图形
绘制矩形 HTML5中实现绘制矩形的效果可以调用上下对象的三个函数fillRect().strokeRect()和clearRect().这些函数的语法格式如下所示: context.fillRect ...
- c语言读取cmos的原理,三步读懂CMOS图像传感器的工作原理
图像传感器是将光信号转换为电信号的装置,在数字电视.可视通信市场中有着广泛的应用.目前应用广泛的主要是CCD(Charge-Coupled Device,电荷耦合器件)与CMOS(Complement ...
- HTML5实践 -- 三步实现响应式设计
HTML5实践 -- 三步实现响应式设计 响应式web设计现在已经不是一个难事了,如果你还不熟悉他,可以参看我的文章<HTML5实践 -- 流式响应式设计>.如果你是一个初学者,可能响应式 ...
- JS(Javascript)调用Android原生方法三步走
三步走: 1.webview 一定要设置这三个方法 webSetting.setJavaScriptEnabled(true); webSetting.setJavaScriptCanOpenWind ...
- php开发俄罗斯方块,HTML5+JS实现俄罗斯方块原理及具体步骤_html5教程技巧
本游戏实现的基本原理:游戏区域是限定大小的区域,本游戏的游戏区域有21×25个矩形,每个矩形width为10单位,heght为6个单位(canvas 的绝对单位是固定的,非像素). 创建RusBloc ...
- 电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】
文章目录 [考拉海购网站]之[顶部导航] 第一步,分析布局 第二步,建立基本的文本目录及文件 第三步,根据第一步对导航栏的分析,在html代码里面补全需要的标签 index.html文件代码 第四步, ...
- 电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】
上一节:电商项目实战第二节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[搜索框那一栏] 文章目录 [考拉海购网站]之[分类导航栏] 第一步,分析页面布局 第二步,写需要的html标签 i ...
- 电商项目实战第六节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【页底信息,网站备案信息】
上一节:电商项目实战第五节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[商品栏及右侧垂直导航] 文章目录 电商项目实战第六节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[页 ...
- 电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...
最新文章
- python【Pandas科学计算库】连女朋友都会用的Pandas(真の能看懂~!)
- OpenCV 4.2.0 发布,Intel 开源的计算机视觉库
- GPS系统跟踪捕获算法的Verilog实现
- ftp 工具_ftp,ftp工具多大
- 马宁的Windows Phone 7开发教程(3)——XNA下使用MessageBox和软键盘
- springboot嵌入thymeleaf后css404_SpringBoot2整合Thymeleaf
- python中去除字符串中首尾空格的函数_Python中去除字符串首尾特定字符的函数:strip()...
- html5 抽奖程序,真正的网页抽奖-JavaScript HTML5代码
- WebM VP8 SDK Usage/关于WebM VP8 SDK的用法
- 增大mysql修改表空间_innodb系统表空间维护方法
- bash历史命令数_如何使用Bash历史记录命令
- 流媒体技术笔记(协议相关)
- Machine Learning - XVIII. Application Example Photo OCR应用实例-照片OCR(Week10)
- mysql concat字符串拼接函数使用
- 新版Fiddler1.5.1的证书导出和Chrome,Edge,Firefox浏览器导入证书
- vue+antDesign实现树形数据展示并表格父子级选中和取消联动
- 【外卖点餐平台项目遇到的问题】
- 改变指标改变图(FusionChart)
- pojnbsp;2392nbsp;Spacenbsp;Elevatornbsp;背包
- 系统可打开最大文件数过小,导致CHECK_NRPE: Error - Could not complete SSL handshake
热门文章
- 用ps实现图片背景透明
- 一个LINUX狂人的语录(个人认为很精辟)
- 微博入局“撒币”,能延长直播答题周期吗?
- 狮子让一只豹子管理10只狼
- css 自定义字体 Internet Explorer,Firefox,Opera,Safari
- 2017 Multi-University Training Contest - Team 6:1003hdu6098、Inversion
- XS-Leaks(跨站点泄漏)攻击和预防
- 日常用语--生病看医生
- 看韩剧有感(娘娘和井上阁下)
- win10下的长仿宋字体是“汉仪长仿宋“