本文主要介紹了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'
});大家學會了嗎？趕快動手嘗試。
相關推薦：
以上是canvas和gif.js打造出自己的數位雨頭像的詳細內容。更多資訊請關注PHP中文網其他相關文章！
