html动画转换为gif,h5使用canvas输出为gif动画图片

使用h5的canvas提供的接口很容易实现一些动画,如果能把这些动画实现成gif动图就更好啦，还真有大神实现啦这个功能下面说明使用方法

开源库地址

首先引入需要的js文件gif.js在页面里自己创建一个canvas并且在它上面画一些动画

js附件在后面下载

然后就是gif的使用方法啦var gif = new GIF({

workers: 2,

quality: 10

});

// 添加一个图片标签对象像素到当前帧

gif.addFrame(imageElement);

//或添加一个canvas对象的像素到当前帧

gif.addFrame(document.getElementsByTagName('canvas')[0], {

delay: 200

});

gif.addFrame(document.getElementsByTagName('canvas')[0], {

delay: 200

});

gif.addFrame(document.getElementsByTagName('canvas')[0], {

delay: 200

});

//从canvas context复制像素到当前帧

gif.addFrame(ctx, {

copy: true

});

//合成图片成功后

gif.on('finished', function(blob) {

window.open(URL.createObjectURL(blob));

}