canvas+gif.js打造自己的数字雨头像的示例代码


Posted in Javascript onOctober 26, 2017

前天 是1024程序员节,不知道各位看官过的怎么样。既然是过节,就要有个过节的样子,比方说,换个头像?。你看我的头像牛逼不。今天介绍一个小demo,上传一个静态头像,就能得到一个动态的数字雨头像。抢先体验传送门](https://imgss.github.io/demo/gif/)

canvas+gif.js打造自己的数字雨头像的示例代码

使用说明

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

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

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

gif.js

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

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

//代码来自官网

var gif = new GIF({
 workers: 2,//启用两个worker。
 quality: 10//图像质量
});//创建一个GIF实例

// 核心方法,向gif中加一帧图像,参数可以是img/canvas元素,还可以从ctx中复制一帧
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});//一帧时长是200

// or copy the pixels from a canvas context
gif.addFrame(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,要来一个循环:

for(...){
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直接看demo。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
服务器安全设置的几个注册表设置
Jul 28 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
canvas绘制多边形
Feb 24 Javascript
JS将unicode码转中文方法
May 08 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 #Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 #Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 #Javascript
webpack3之loader全解析
Oct 26 #Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 #Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 #Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 #Javascript
You might like
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
python提取log文件内容并画出图表
2019/07/08 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
《莫高窟》教学反思
2014/02/25 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
六查六看剖析材料
2014/10/06 职场文书
岗位聘任报告
2015/03/02 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
Python selenium的这三种等待方式一定要会!
2021/06/10 Python