canvas和gif.js打造出自己的數位雨頭像

本文主要介紹了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'
});

大家學會了嗎？趕快動手嘗試。

相關推薦：

微信小程式怎麼上傳頭像

#利用Laravel產生Gravatar頭像位址的優雅方法

CSS3實作頭像旋轉效果實例分享

以上是canvas和gif.js打造出自己的數位雨頭像的詳細內容。更多資訊請關注PHP中文網其他相關文章！