前天是程序员节1024。我不知道官员们做得怎么样。既然是假期，就要看起来像假期，比如换个头像。你觉得我的头像牛逼吗？今天介绍一个小演示，上传一个静态头像，就可以得到一个动态的数字雨头像。先体验门户](https://imgss.github.io/demo/gif/)

说明

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

2.生成后，看看字符颜色是否太奇怪，可以更改字符颜色

3.如果您满意，右键单击并另存为

gif.js

今天的主角是gif.js，gif.js，它是一个可以依靠浏览器上的H5api实现gif动画的库。在这里，我将介绍我的猜测。花园里有关于画数字雨的相关文章，我就不瞎BB了。

Gif.js可以根据画布动画轻松获取gif:

//来自官网var gif=newgif的代码({workers : 2，//启用两个workers。Quality: 10//图像质量})；//创建gif实例//Core方法，给GIF添加一帧图像，参数可以是img/canvas元素，也可以从ctx复制一帧GIF . addframe(imageElement)；//或画布元素gif.addFrame(canvasElement，{ delay : 200 })；//帧长度为200//或者从画布上下文gif中复制像素。添加框架(CTX，{ copy : true })；Gif.on ('finished '，function(blob){//最后生成一个blob对象window.open (URL。createobjecturl(blob))；});gif . render()；//开始。总的来说，这个库的api非常简洁友好。之前看到一个jsGif，然后发现这么好的东西。因为生成gif图像是一个cpu密集型操作，尤其是当图像很大时，库允许在webworker中呈现。不过文件中还有几点需要注意(其实是我踩的坑):

1.git.addFrame就是添加一个框架。要生成移动gif，需要一个循环：

对于(.){GIF.render(.)}2.在构造函数gif的选项中，workerScript选项是必需的，这样就可以在worker中呈现图像，如下所示：

var gif=new GIF({workers: 2，quality: 10，workerScript: '。/gif . worker . js ' })；我把源代码放在github，https://github.com/imgss/gif_rain_code,或者F12上直接看演示。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。