首页 > 正在进行安全检测...

正在进行安全检测...

发布时间：2024-04-20 08:47:39 来源：文档文库

小中大

字号：

手机查看

只要三步，使用html5+js实现像素风头像生成器
html5的画布给我们带来了很大的空间，其实像素风格头像生成器只是用到了画方块的方法。画一个像素头像，只要三步，1、解决像素点，2、解决像素点之间的关系，3、一次次地画像素点。
先画个方块
其实在canvas上画方块非常简单，只要通过js在页面上取得一个画布，然后再生成上下文，再定义画笔，然后再往上画就好了。
比如：
id=mycanvaswidth=100height=100style=border:1pxsolid#d3d3d3;>yourbrowserdoesnotsupportthehtml5canvastag.上面在html里面定义好了一个画布，然后用js取到这个画布对象。
varc=document.getelementbyid(mycanvas;取到上下文，并且设置一些参数，画下第一笔：一个小方块：

varctx=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

本文来源：https://www.2haoxitong.net/k/doc/c05b5b91c47da26925c52cc58bd63186bceb929b.html