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