canvas和gif.js打造自己的数字雨头像

使用说明

1.传一个你喜欢的头像，最后是正方形的

2.生成后看字符颜色是不是太诡异，可以改变字符颜色

3.觉得满意，右键另存为即可

gif.js

今天的主角是gif.js,gif.js是一个在浏览器上依靠H5api就能gif动画的库，这里介绍一下我猜的坑。关于绘制数字雨，园子里有相关文章，我就不瞎BB了。

gif.js可以很方便的根据canvas动图得到gif:

整体而言，这个库的api十分简洁，友好。之前看了一个jsGif，看的云里雾里，后来才发现这么个好东西。由于生成gif图像是个耗费cpu的操作，尤其是当图像比较大的时候，因此库允许在webworker中渲染。但是文档中还是有几个要注意的地方要说明（其实是我踩的坑）:

1.git.addFrame是添加一帧，要生成会动的gif,要来一个循环：

2.构造函数GIF的选项中,需要workerScript选项,这样才能实现在worker中渲染图像，如下所示：

大家学会了吗？赶紧动手尝试一下吧。

相关推荐：

微信小程序怎么上传头像

利用Laravel生成Gravatar头像地址的优雅方法

CSS3实现头像旋转效果实例分享

以上就是canvas和gif.js打造自己的数字雨头像的详细内容，更多请关注Gxl网其它相关文章！