這篇文章將為大家詳細講解有關(guān)如何利用純JS實現(xiàn)像素逐漸顯示，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)長期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為大同企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、成都網(wǎng)站制作，大同網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

js的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進行服務(wù)器端編程。

前言

對于新手的我，以前從來沒有做過對像素進行操作的實例。于是把資料書找了出來，實現(xiàn)了這個功能，比較簡單，大神勿噴。下面是效果圖，因為重在思路，效果就簡陋一些。

實現(xiàn)思路

其實就是簡單的用JS實現(xiàn)將左上角的矩形隨時間圖像逐漸顯示在它的右下方。

首先，先把思路架構(gòu)起來，因為對像素操作，所以需要用到canvas。

然后，我們 需要畫一個矩形，并且需要獲取到它的每一個像素的值，即每一個像素的4要素，rgba。（方法getImageData，4個參數(shù)，前兩個坐標(biāo)，X和Y，后兩個是長和寬）

最后，用一個定時器實現(xiàn)逐漸顯示的功能。（顯示可以用putImageData，3個參數(shù)，第一個是需要顯示的圖像，第二和第三是坐標(biāo)值XY）

然后我們開始動手敲代碼：

我們可以先做出一個沒有定時器的，也就是先試著獲取到原矩形1/10的像素點，然后顯示出來。

其中因為getImageData的data屬性是一個數(shù)組，而且數(shù)組中的存放的東西，就是我們需要的rgba4個數(shù)，存放形式為：

• data[0]第一個像素點的r值:

• data[1]:第一個像素點的g值

• data[2]:第一個像素點的b值

• data[3]:第一個像素點的a值

• data[4]:第二個像素點的r值

• data[5]:第二個像素點的g值

以此類推，4個一循環(huán)。

然后數(shù)組dataC里面存放的是取出的像素點位置，然后用乘以4和分別加一，加二，加三為了定位到每一個像素點的rgba分別的4個值。此時就能實現(xiàn)抽取一部分像素點顯示的功能。

最后，將代碼改進。

第一步，我們需要改進randomData這個函數(shù)，使之返回的數(shù)組是包含原矩形的所有像素。

function randomData(allNum,nowNum) {
    var dataA = [];
    var dataB = [];
    for(var i=0;i
嵌套了一層for循環(huán)，使返回的dataB數(shù)組里面分成了一定組數(shù)的一定量個像素點。
然后增加一個定時器，最終代碼為：



 
 
 
 




其中31到35行的for循環(huán)還是一樣將原矩形的像素點傳遞給新矩形。但是這一次是用iNum來實現(xiàn)分批次的傳遞和顯示。注意這里的dataC，也就是randomData函數(shù)返回的數(shù)組是一個二維數(shù)組。最后用一個if—else判斷來控制計時器的繼續(xù)計時和停止計時。
關(guān)于“如何利用純JS實現(xiàn)像素逐漸顯示”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
            

            當(dāng)前文章：如何利用純JS實現(xiàn)像素逐漸顯示-創(chuàng)新互聯(lián)            

            新聞來源：http://weahome.cn/article/cedhee.html