欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

canvas+gif.js打造自己的數(shù)字雨頭像的示例代碼

 更新時(shí)間：2017年10月26日 10:42:31   作者：nobody-junior  
本篇文章主要介紹了canvas+gif.js打造自己的數(shù)字雨頭像的示例代碼，這里整理了詳細(xì)的代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

前天 是1024程序員節(jié)，不知道各位看官過的怎么樣。既然是過節(jié)，就要有個(gè)過節(jié)的樣子，比方說，換個(gè)頭像😀。你看我的頭像牛逼不。今天介紹一個(gè)小demo，上傳一個(gè)靜態(tài)頭像，就能得到一個(gè)動(dòng)態(tài)的數(shù)字雨頭像。搶先體驗(yàn)傳送門](https://imgss.github.io/demo/gif/)

使用說明

1.傳一個(gè)你喜歡的頭像，最后是正方形的

2.生成后看字符顏色是不是太詭異，可以改變字符顏色

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

gif.js

今天的主角是gif.js,gif.js是一個(gè)在瀏覽器上依靠H5api就能gif動(dòng)畫的庫，這里介紹一下我猜的坑。關(guān)于繪制數(shù)字雨，園子里有相關(guān)文章，我就不瞎BB了。

gif.js可以很方便的根據(jù)canvas動(dòng)圖得到gif:

//代碼來自官網(wǎng)

var gif = new GIF({
 workers: 2,//啟用兩個(gè)worker。
 quality: 10//圖像質(zhì)量
});//創(chuàng)建一個(gè)GIF實(shí)例

// 核心方法，向gif中加一幀圖像，參數(shù)可以是img/canvas元素，還可以從ctx中復(fù)制一幀
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});//一幀時(shí)長是200

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});

gif.on('finished', function(blob) {//最后生成一個(gè)blob對(duì)象
 window.open(URL.createObjectURL(blob));
});

gif.render();//開始啟動(dòng)

整體而言，這個(gè)庫的api十分簡(jiǎn)潔，友好。之前看了一個(gè)jsGif，看的云里霧里，后來才發(fā)現(xiàn)這么個(gè)好東西。由于生成gif圖像是個(gè)耗費(fèi)cpu的操作，尤其是當(dāng)圖像比較大的時(shí)候，因此庫允許在webworker中渲染。但是文檔中還是有幾個(gè)要注意的地方要說明（其實(shí)是我踩的坑）:

1.git.addFrame是添加一幀，要生成會(huì)動(dòng)的gif,要來一個(gè)循環(huán)：

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

2.構(gòu)造函數(shù)GIF的選項(xiàng)中,需要workerScript選項(xiàng),這樣才能實(shí)現(xiàn)在worker中渲染圖像，如下所示：

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

源碼我放在github上了，https://github.com/imgss/gif_rain_code，或者F12直接看demo。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論