基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法【專利摘要】本發(fā)明涉及基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，包括計(jì)算像素差部分以及實(shí)現(xiàn)部分。主要利用像素差逐幀動(dòng)畫，剔除掉前后幀中相同或者相似的部分得到像素差，然后根據(jù)前一幀和像素差還原出后一幀，既不會(huì)丟失數(shù)據(jù)又能大幅減少加載所需的資源體積，大幅減少Web逐幀動(dòng)畫所需的資源體積，可以在網(wǎng)絡(luò)環(huán)境較差的情況下依然保持良好的用戶體驗(yàn)?！緦＠f(shuō)明】基于Canvas和WebWorker的像素差逐巾貞動(dòng)畫的實(shí)現(xiàn)方法
技術(shù)領(lǐng)域：
本發(fā)明涉及像素差逐幀動(dòng)畫，更具體地說(shuō)是指基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法?！?br>背景技術(shù)：
】現(xiàn)階段Web逐幀動(dòng)畫的主要實(shí)現(xiàn)方法是把每一幀圖片合并成一張完整的精靈圖，然后再使用Web技術(shù)(IMG、Canvas、CSS3)依次展示其中的一部分，如說(shuō)明書附圖1所示。當(dāng)前Web逐幀動(dòng)畫的實(shí)現(xiàn)方法，會(huì)重復(fù)加載每幀圖片中相同或者相似的部分，導(dǎo)致實(shí)現(xiàn)較復(fù)雜逐幀動(dòng)畫時(shí)需要加載大量資源，在網(wǎng)絡(luò)環(huán)境較差的情況下，需要很長(zhǎng)的加載等待時(shí)間，用戶體驗(yàn)很差。因此，有必要開發(fā)一種新的Web逐幀動(dòng)畫的實(shí)現(xiàn)方法來(lái)解決Web逐幀動(dòng)畫所需的資源體積，提尚用戶體驗(yàn)?！?br/>發(fā)明內(nèi)容】本發(fā)明的目的在于克服現(xiàn)有技術(shù)的缺陷，提供基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法。為實(shí)現(xiàn)上述目的，本發(fā)明采用以下技術(shù)方案:基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，包括以下具體步驟:步驟1.計(jì)算像素差部分，首先加載前后幀圖片然后通過(guò)canvas獲得前后幀類數(shù)組形式的像素?cái)?shù)據(jù)接著設(shè)置允許誤差和最小截取長(zhǎng)度，參數(shù)設(shè)置完成之后根據(jù)設(shè)置的允許誤差值計(jì)算像素差數(shù)組;根據(jù)最小截取長(zhǎng)度截取像素差數(shù)組并獲得位置信息數(shù)組;在獲取的數(shù)據(jù)中插入255alpha值;把像素差數(shù)據(jù)存儲(chǔ)為png圖片，在像素?cái)?shù)據(jù)后補(bǔ)充無(wú)效顏色點(diǎn)并記錄到位置信息數(shù)據(jù)中，最后根據(jù)得到的數(shù)據(jù)反向操作得到后幀還原圖，對(duì)比還原圖和原圖，如果不符合預(yù)期則重新設(shè)置參數(shù)直至還原圖符合預(yù)期；另外當(dāng)所有圖片計(jì)算完畢后進(jìn)入第二部分，否則計(jì)算一下幀并把當(dāng)前還原圖當(dāng)成原圖充當(dāng)下一次計(jì)算像素差的前幀；步驟2.實(shí)現(xiàn)部分，先整理數(shù)據(jù)把所有像素差圖片合成一張精靈圖同時(shí)把所有位置信息數(shù)組放到j(luò)s文件中，加載整理后的精靈圖和相關(guān)位置信息數(shù)據(jù)文件，開啟webworker并根據(jù)像素差圖片和對(duì)應(yīng)的位置信息還原出原始圖片并根據(jù)實(shí)際情況采用不同的方法實(shí)現(xiàn)逐幀動(dòng)畫。其進(jìn)一步技術(shù)方案為:所述步驟I中計(jì)算像素差是利用HTML5的新特性Canvas,Canvas提供了getlmageData方法，可以得到類數(shù)組形式的圖片的像素?cái)?shù)據(jù)，通過(guò)計(jì)算前后幀圖片的類數(shù)組形式像素?cái)?shù)據(jù)的差異就可以得到類數(shù)組形式的像素差。其進(jìn)一步技術(shù)方案為:所述步驟I中的像素差數(shù)據(jù)存儲(chǔ)為png圖片用Canvas提供的PUtImageData方法，把像素差數(shù)據(jù)進(jìn)行一些優(yōu)化后存儲(chǔ)為PNG格式并得到相關(guān)的位置信息。其進(jìn)一步技術(shù)方案為:所述步驟I中得到相關(guān)的位置信息，首先需要剔除掉像素差類數(shù)組中的連續(xù)無(wú)效像素點(diǎn)，并記錄剔除點(diǎn)起始位置和剔除點(diǎn)位數(shù)得到相關(guān)位置信息;然后在每個(gè)像素點(diǎn)的Alpha值前邊手動(dòng)插入255，從而讓原Alpha值后退一位成為下一個(gè)像素點(diǎn)的R值;最后在像素差類數(shù)組尾部增加一些連續(xù)無(wú)效像素點(diǎn)，讓所有輸出的像素差PNG圖片具有相同的高度或?qū)挾?，合成最終精靈圖片。其進(jìn)一步技術(shù)方案為:所述步驟I中通過(guò)像素差還原原始圖片是存儲(chǔ)像素差的反向操作。其進(jìn)一步技術(shù)方案為:所述步驟2中像素差逐幀動(dòng)畫的實(shí)現(xiàn)方式是需要在一定位置存儲(chǔ)原圖片，然后在原圖片中間位置存儲(chǔ)像素差，還原出所有動(dòng)畫幀之后再按普通的方式實(shí)現(xiàn)逐幀動(dòng)畫。其進(jìn)一步技術(shù)方案為:所述步驟2中像素差逐幀動(dòng)畫的實(shí)現(xiàn)方式是只需要存儲(chǔ)像素差數(shù)據(jù)，然后按照先后順序還原一幀顯示一幀。本發(fā)明與現(xiàn)有技術(shù)相比的有益效果是:本發(fā)明的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，主要利用像素差逐幀動(dòng)畫，剔除掉前后幀中相同或者相似的部分得到像素差，然后根據(jù)前一幀和像素差還原出后一幀，既不會(huì)丟失數(shù)據(jù)又能大幅減少加載所需的資源體積，大幅減少Web逐幀動(dòng)畫所需的資源體積，可以在網(wǎng)絡(luò)環(huán)境較差的情況下依然保持良好的用戶體驗(yàn)。下面結(jié)合附圖和具體實(shí)施例對(duì)本發(fā)明作進(jìn)一步描述?！靖綀D說(shuō)明】圖1為現(xiàn)階段Web逐幀動(dòng)畫的主要實(shí)現(xiàn)方法的最終精靈圖片輸出示意圖；圖2為本發(fā)明實(shí)施例提供的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法的結(jié)構(gòu)示意圖；圖3為本發(fā)明實(shí)施例提供的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法的最終精靈圖片輸出示意圖?！揪唧w實(shí)施方式】為了更充分理解本發(fā)明的技術(shù)內(nèi)容，下面結(jié)合具體實(shí)施例對(duì)本發(fā)明的技術(shù)方案進(jìn)一步介紹和說(shuō)明，但不局限于此。如圖2-圖3所示的具體實(shí)施例，本實(shí)施例提供的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，會(huì)剔除掉前后幀圖片中的相同或者相似的部分，大幅減少Web逐幀動(dòng)畫所需的資源體積，可以在網(wǎng)絡(luò)環(huán)境較差的情況下依然保持良好的用戶體驗(yàn)。在本實(shí)施例中，逐幀動(dòng)畫又名定格動(dòng)畫，是一種動(dòng)畫技術(shù)，其原理即將每幀不同的圖像連續(xù)播放，從而產(chǎn)生動(dòng)畫效果。精靈圖又名CSSSprites，是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式，它允許你將一些零星圖片合并成一張大圖。HTML5:是HTML最新的修訂版本，2014年10月由萬(wàn)維網(wǎng)聯(lián)盟(W3C)完成標(biāo)準(zhǔn)制定。Canvas:是HTML5的一部分，允許腳本語(yǔ)言動(dòng)態(tài)渲染位圖像。CSS3:是層疊樣式表(CascadingStyleSheets)語(yǔ)言的最新進(jìn)展。GetImageData:Canvas2DAPI，返回一個(gè)ImageData對(duì)象，用來(lái)描述Canvas區(qū)域的像素?cái)?shù)據(jù)。PutImageData:Canvas2DAPI，將ImageData對(duì)象中的像素?cái)?shù)據(jù)繪制到位圖。PNG:便攜式網(wǎng)絡(luò)圖形(PortableNetworkGraphics，PNG)是一種無(wú)損壓縮的位圖圖形格式，支持索引、灰度、RGB三種顏色方案以及Alpha通道等特性。Alpha通道:又名阿爾法通道，是一個(gè)8位的灰度通道，該通道用256級(jí)灰度來(lái)記錄圖像中透明信息，定義透明、不透明和半透明區(qū)域。瀏覽器:是指可以顯示網(wǎng)頁(yè)服務(wù)器或者文件系統(tǒng)的HTML文件內(nèi)容，并讓給用戶與這些文件交互的一種軟件。JAVASCRIPT:—種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類型、基于原型的語(yǔ)言，內(nèi)置支持類。數(shù)組:是電腦編程語(yǔ)言上對(duì)于Array的中文稱呼，主要作用是使用單獨(dú)的變量名來(lái)存儲(chǔ)一系列的值。雙向鏈表:也叫雙鏈表，是鏈表的一種，它的每個(gè)數(shù)據(jù)節(jié)點(diǎn)中都有兩個(gè)指針，分別指向直接后繼和直接前驅(qū)JebWorker:是HTML5的一部分，是運(yùn)行在后臺(tái)的JAVASCRIPT，獨(dú)立于其它腳本，不會(huì)影響頁(yè)面的性能?；贑anvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，主要分為兩個(gè)部分:第一部分為計(jì)算像素差部分，第二部分為實(shí)現(xiàn)部分。具體如下:步驟1.計(jì)算像素差部分，首先加載前后幀圖片然后通過(guò)canvas獲得前后幀類數(shù)組形式的像素?cái)?shù)據(jù)接著設(shè)置允許誤差和最小截取長(zhǎng)度，參數(shù)設(shè)置完成之后根據(jù)設(shè)置的允許誤差值計(jì)算像素差數(shù)組;根據(jù)最小截取長(zhǎng)度截取像素差數(shù)組并獲得位置信息數(shù)組;為了避免當(dāng)前瀏覽器的canvas實(shí)現(xiàn)機(jī)制導(dǎo)致的數(shù)據(jù)丟失，還需要在獲取的數(shù)據(jù)中插入255alpha值;為了方便把像素差數(shù)據(jù)存儲(chǔ)為png圖片，在像素?cái)?shù)據(jù)后補(bǔ)充無(wú)效顏色點(diǎn)并記錄到位置信息數(shù)據(jù)中，最后根據(jù)得到的數(shù)據(jù)反向操作得到后幀還原圖，對(duì)比還原圖和原圖，如果不符合預(yù)期則重新設(shè)置參數(shù)直至還原圖符合預(yù)期；另外當(dāng)所有圖片計(jì)算完畢后進(jìn)入第二部分，否則計(jì)算一下幀并把當(dāng)前還原圖當(dāng)成原圖充當(dāng)下一次計(jì)算像素差的前幀。步驟2.實(shí)現(xiàn)部分，先整理數(shù)據(jù)把所有像素差圖片合成一張精靈圖同時(shí)把所有位置信息數(shù)組放到j(luò)s文件中，加載整理后的精靈圖和相關(guān)位置信息數(shù)據(jù)文件，開啟webworker并根據(jù)像素差圖片和對(duì)應(yīng)的位置信息還原出原始圖片并根據(jù)實(shí)際情況采用不同的方法實(shí)現(xiàn)逐幀動(dòng)畫。上述的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，主要利用像素差逐幀動(dòng)畫，剔除掉前后幀中相同或者相似的部分得到像素差，然后根據(jù)前一幀和像素差還原出后一幀，既不會(huì)丟失數(shù)據(jù)又能大幅減少加載所需的資源體積，大幅減少Web逐幀動(dòng)畫所需的資源體積，可以在網(wǎng)絡(luò)環(huán)境較差的情況下依然保持良好的用戶體驗(yàn)。更近一步，對(duì)于步驟I，計(jì)算像素差主要是利用HTML5的新特性Canvas，Canvas提供了getlmageData方法，可以得到類數(shù)組形式的圖片的像素?cái)?shù)據(jù)，通過(guò)計(jì)算前后幀圖片的類數(shù)組形式像素?cái)?shù)據(jù)的差異就可以得到類數(shù)組形式的像素差。另外，對(duì)于步驟I中的像素差數(shù)據(jù)存儲(chǔ)為png圖片，由于PNG格式是一種優(yōu)秀的圖片存儲(chǔ)格式，為了保證得到的像素差數(shù)據(jù)存儲(chǔ)之后不能大于原圖，這里依然考慮用Canvas提供的PUtImageData方法，把像素差數(shù)據(jù)進(jìn)行一些優(yōu)化后存儲(chǔ)為PNG格式并得到相關(guān)的位置信息，得到相關(guān)的位置信息的主要優(yōu)化方法有如下:首先需要剔除掉像素差類數(shù)組中的連續(xù)無(wú)效像素點(diǎn)，并記錄剔除點(diǎn)起始位置和剔除點(diǎn)位數(shù)得到相關(guān)位置信息。然后由于現(xiàn)階段瀏覽器對(duì)Canvas的實(shí)現(xiàn)出于性能的考慮，在像素點(diǎn)的AIpha值小于255的時(shí)候，getImageData和putlmageData之間存在數(shù)據(jù)丟失，為了防止數(shù)據(jù)丟失對(duì)逐幀動(dòng)畫產(chǎn)生影響，這里需要在每個(gè)像素點(diǎn)的Alpha值前邊手動(dòng)插入255，從而讓原Alpha值后退一位成為下一個(gè)像素點(diǎn)的R值;最后還需要在像素差類數(shù)組尾部增加一些連續(xù)無(wú)效像素點(diǎn)，從而讓所有輸出的像素差PNG圖片具有相同的高度或?qū)挾?，方便最終精靈圖片的合成。以上優(yōu)化操作主要是基于影響PNG圖片大小的因素有，PNG圖片的寬度和高度、PNG圖片中顏色的分布規(guī)律、PNG圖片中非完全透明像素點(diǎn)的個(gè)數(shù)更近一步，對(duì)于步驟I，通過(guò)像素差還原原始圖片其實(shí)就是存儲(chǔ)像素差的反向操作，不過(guò)需要注意的是由于還原像素差操作是用戶訪問(wèn)網(wǎng)頁(yè)時(shí)在用戶瀏覽器中進(jìn)行的，所以和計(jì)算以及存儲(chǔ)這兩個(gè)操作不同的是，還原像素差操作需要考慮時(shí)間因素，必須盡可能的提高性能；而瀏覽器中的JAVASCRIPT數(shù)組類型的插入和刪除操作效率很低，不適合還原像素差這種需要大量計(jì)算的操作，所以這里需要實(shí)現(xiàn)一種自定義雙向鏈表結(jié)構(gòu)，同時(shí)還要優(yōu)化該鏈表的查詢效率(因?yàn)檫€原像素差操作也涉及到大量查詢操作)；最后為了防止大量計(jì)算導(dǎo)致頁(yè)面卡頓，這里還需要利用HTML5的新特性WebWorker，實(shí)現(xiàn)多線程編程。另外，對(duì)于步驟2中，像素差逐幀動(dòng)畫的實(shí)現(xiàn)方式:需要在一定位置存儲(chǔ)原圖片，然后在原圖片中間位置存儲(chǔ)像素差，還原出所有動(dòng)畫幀之后再按普通的方式實(shí)現(xiàn)逐幀動(dòng)畫，這種方法的優(yōu)點(diǎn)是能精確控制時(shí)間間隔。于其他實(shí)施例，對(duì)于步驟2中，像素差逐幀動(dòng)畫的實(shí)現(xiàn)方式為只需要存儲(chǔ)像素差數(shù)據(jù)，然后按照先后順序還原一幀顯示一幀，這種方法的優(yōu)點(diǎn)是加載資源少。另外，本發(fā)明使用簡(jiǎn)單數(shù)據(jù)模擬流程實(shí)現(xiàn)如下:[0001]通過(guò)前后幀圖片路徑加載前后幀圖片；[0002]設(shè)置允許的誤差值和最小截取長(zhǎng)度；[0003]在前后幀圖片都加載完畢之后使用Canvas的getlmageData獲得圖片的類數(shù)組結(jié)構(gòu)的像素?cái)?shù)據(jù)也就是JAVASCRIPT的ImageData對(duì)象；[0004]此時(shí)記錄后一幀數(shù)組中和前一幀數(shù)組中相同位置的差值絕對(duì)值大于預(yù)設(shè)誤差值的顏色點(diǎn)的值到新的像素?cái)?shù)組中，如果不符合條件則新的像素?cái)?shù)組中的同一位置記錄O，如果在后一幀被記錄的顏色點(diǎn)的顏色值等于0(該顏色點(diǎn)也就是無(wú)效顏色點(diǎn))，此時(shí)應(yīng)該記錄前一幀的顏色值(用來(lái)區(qū)分無(wú)效顏色點(diǎn))；[0005]接著按預(yù)設(shè)的截取位數(shù)從新像素?cái)?shù)組的開始位置刪除無(wú)效像素點(diǎn)并記錄被截取無(wú)效像素點(diǎn)的起始位置得到過(guò)渡像素差數(shù)組；[0006]由于瀏覽器對(duì)Canvas的實(shí)現(xiàn)在alpha值小于255的時(shí)候會(huì)出現(xiàn)數(shù)據(jù)丟失的現(xiàn)象，所以在過(guò)渡像素差數(shù)組的所有alpha位置前手動(dòng)插入顏色值255，原alpha值向后移動(dòng)一位成為下一個(gè)像素點(diǎn)的R值，得到新的過(guò)渡像素差數(shù)組；[0007]在新的過(guò)渡像素差數(shù)組尾部補(bǔ)充一些多余的無(wú)效像素點(diǎn)，新補(bǔ)充的無(wú)效顏色點(diǎn)也需要記錄到位置信息數(shù)組中從而得到最終的像素差數(shù)組和最終的位置信息數(shù)組；[0008]計(jì)算像素差數(shù)組和位置信息數(shù)組的全部流程；[0009]用Canvas的putImageData方法把得到的像素差數(shù)組用png形式存儲(chǔ)，而得到的位置信息數(shù)組直接放置到JAVASCRIPT代碼中；[0010]由于計(jì)算像素差時(shí)允許設(shè)置一定的誤差值，如果始終使用原圖會(huì)導(dǎo)致很多幀之后本來(lái)肉眼無(wú)法分辨的誤差被放大以至于能用肉眼分辨，所以進(jìn)行完一次計(jì)算之后需要用這次還原的后幀圖片充當(dāng)下一次計(jì)算的前幀圖片，以保證不管有多少幀始終只有在最后一幀存在肉眼無(wú)法分辨的誤差；[0011]根據(jù)合適的誤差值以及截取長(zhǎng)度計(jì)算每一幀的像素差之后，把得到的像素差png圖片合成一張大的精靈圖；[0012]實(shí)現(xiàn)像素差逐幀動(dòng)畫時(shí)，需要先加載像素差png精靈圖，以及位置信息JS文件；[0013]資源加載完畢之后，分別根據(jù)像素差數(shù)據(jù)和對(duì)應(yīng)的位置信息按照計(jì)算像素差的反向操作還原出原始圖片，然后采取不同的方式實(shí)現(xiàn)逐幀動(dòng)畫。本發(fā)明的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，主要利用像素差逐幀動(dòng)畫，剔除掉前后幀中相同或者相似的部分得到像素差，然后根據(jù)前一幀和像素差還原出后一幀，既不會(huì)丟失數(shù)據(jù)又能大幅減少加載所需的資源體積，大幅減少Web逐幀動(dòng)畫所需的資源體積，可以在網(wǎng)絡(luò)環(huán)境較差的情況下依然保持良好的用戶體驗(yàn)。上述僅以實(shí)施例來(lái)進(jìn)一步說(shuō)明本發(fā)明的技術(shù)內(nèi)容，以便于讀者更容易理解，但不代表本發(fā)明的實(shí)施方式僅限于此，任何依本發(fā)明所做的技術(shù)延伸或再創(chuàng)造，均受本發(fā)明的保護(hù)。本發(fā)明的保護(hù)范圍以權(quán)利要求書為準(zhǔn)。【主權(quán)項(xiàng)】1.基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，其特征在于，包括以下具體步驟:步驟1.計(jì)算像素差部分，首先加載前后幀圖片然后通過(guò)canvas獲得前后幀類數(shù)組形式的像素?cái)?shù)據(jù)接著設(shè)置允許誤差和最小截取長(zhǎng)度，參數(shù)設(shè)置完成之后根據(jù)設(shè)置的允許誤差值計(jì)算像素差數(shù)組;根據(jù)最小截取長(zhǎng)度截取像素差數(shù)組并獲得位置信息數(shù)組;在獲取的數(shù)據(jù)中插入255alpha值;把像素差數(shù)據(jù)存儲(chǔ)為png圖片，在像素?cái)?shù)據(jù)后補(bǔ)充無(wú)效顏色點(diǎn)并記錄到位置信息數(shù)據(jù)中，最后根據(jù)得到的數(shù)據(jù)反向操作得到后幀還原圖，對(duì)比還原圖和原圖，如果不符合預(yù)期則重新設(shè)置參數(shù)直至還原圖符合預(yù)期；另外當(dāng)所有圖片計(jì)算完畢后進(jìn)入第二部分，否則計(jì)算一下幀并把當(dāng)前還原圖當(dāng)成原圖充當(dāng)下一次計(jì)算像素差的前幀；步驟2.實(shí)現(xiàn)部分，先整理數(shù)據(jù)把所有像素差圖片合成一張精靈圖同時(shí)把所有位置信息數(shù)組放到j(luò)s文件中，加載整理后的精靈圖和相關(guān)位置信息數(shù)據(jù)文件，開啟webworker并根據(jù)像素差圖片和對(duì)應(yīng)的位置信息還原出原始圖片并根據(jù)實(shí)際情況采用不同的方法實(shí)現(xiàn)逐幀動(dòng)畫。2.根據(jù)權(quán)利要求1所述的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，其特征在于，所述步驟I中計(jì)算像素差是利用HTML5的新特性Canvas，Canvas提供了getlmageData方法，可以得到類數(shù)組形式的圖片的像素?cái)?shù)據(jù)，通過(guò)計(jì)算前后幀圖片的類數(shù)組形式像素?cái)?shù)據(jù)的差異就可以得到類數(shù)組形式的像素差。3.根據(jù)權(quán)利要求1所述的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，其特征在于，所述步驟I中的像素差數(shù)據(jù)存儲(chǔ)為png圖片用Canvas提供的putImageData方法，把像素差數(shù)據(jù)進(jìn)行一些優(yōu)化后存儲(chǔ)為PNG格式并得到相關(guān)的位置信息。4.根據(jù)權(quán)利要求3所述的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，其特征在于，所述步驟I中得到相關(guān)的位置信息，首先需要剔除掉像素差類數(shù)組中的連續(xù)無(wú)效像素點(diǎn)，并記錄剔除點(diǎn)起始位置和剔除點(diǎn)位數(shù)得到相關(guān)位置信息;然后在每個(gè)像素點(diǎn)的Alpha值前邊手動(dòng)插入255，從而讓原Alpha值后退一位成為下一個(gè)像素點(diǎn)的R值;最后在像素差類數(shù)組尾部增加一些連續(xù)無(wú)效像素點(diǎn)，讓所有輸出的像素差PNG圖片具有相同的高度或?qū)挾龋铣勺罱K精靈圖片。5.根據(jù)權(quán)利要求4所述的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，其特征在于，所述步驟I中通過(guò)像素差還原原始圖片是存儲(chǔ)像素差的反向操作。6.根據(jù)權(quán)利要求1所述的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，其特征在于，所述步驟2中像素差逐幀動(dòng)畫的實(shí)現(xiàn)方式是需要在一定位置存儲(chǔ)原圖片，然后在原圖片中間位置存儲(chǔ)像素差，還原出所有動(dòng)畫幀之后再按普通的方式實(shí)現(xiàn)逐幀動(dòng)畫。7.根據(jù)權(quán)利要求1所述的基于Canvas和WebWorker的像素差逐幀動(dòng)畫的實(shí)現(xiàn)方法，其特征在于，所述步驟2中像素差逐幀動(dòng)畫的實(shí)現(xiàn)方式是只需要存儲(chǔ)像素差數(shù)據(jù)，然后按照先后順序還原一幀顯不一幀?！疚臋n編號(hào)】G06T13/80GK105844683SQ201610169268【公開日】2016年8月10日【申請(qǐng)日】2016年3月23日【發(fā)明人】李洋,李華,易鄭超,溫正東【申請(qǐng)人】深圳市富途網(wǎng)絡(luò)科技有限公司