canvas+gif.js打造自己的數字雨頭像

昨天 是1024程式師節，不知道各位看官過的怎麼樣。既然是過節，就要有個過節的樣子，比方說，換個頭像。你看我的頭像牛逼不。今天介紹一個小demo，上傳一個靜態頭像，就能得到一個動態的數位雨頭像。

使用說明

傳一個你喜歡的頭像，最後是正方形的

生成後看字元顏色是不是太詭異，可以改變字元顏色

覺得滿意，右鍵另存為即可

gif.js

今天的主角是gif.js,gif.js是一個在流覽器上依靠H5api就能gif動畫的庫，這裡介紹一下我猜的坑。關於繪製數字雨，

園子裡有相關文章，我就不瞎BB了。

推薦下我的前端群：524262608，不管你是小白還是大牛，小編我都挺歡迎，不定期分享乾貨，包括我自己整理的一份最新的前端資料和零基礎入門教程，歡迎初學和進階中的小夥伴。

gif.js可以很方便的根據canvas動圖得到gif:

/代碼來自官網vargif = 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 contextgif.addFrame(ctx, {copy: true}); gif.on('finished', function(blob) {//最後生成一個blob物件 window.open(URL.createObjectURL(blob)); }); gif.render(); //開始啟動

整體而言，

這個庫的api十分簡潔，友好。之前看了一個jsGif，看的雲裡霧裡，後來才發現這麼個好東西。由於生成gif圖像是個耗費cpu的操作，尤其是當圖像比較大的時候，因此庫允許在webworker中渲染。但是文檔中還是有幾個要注意的地方要說明（其實是我踩的坑）:

git.addFrame是添加一幀，要生成會動的gif,要來一個迴圈：

for(...){gif.render(...)}

構造函數GIF的選項中,需要workerScript選項,這樣才能實現在worker中渲染圖像，如下所示：

var gif = new GIF({workers: 2,quality: 10, workerScript:'./gif.worker.js'});

原文：http://www.cnblogs.com/imgss/p/7727132.html