您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)如何利用純JS實(shí)現(xiàn)像素逐漸顯示,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
1、能夠嵌入動(dòng)態(tài)文本于HTML頁面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
前言
對(duì)于新手的我,以前從來沒有做過對(duì)像素進(jìn)行操作的實(shí)例。于是把資料書找了出來,實(shí)現(xiàn)了這個(gè)功能,比較簡(jiǎn)單,大神勿噴。下面是效果圖,因?yàn)橹卦谒悸?,效果就?jiǎn)陋一些。
實(shí)現(xiàn)思路
其實(shí)就是簡(jiǎn)單的用JS實(shí)現(xiàn)將左上角的矩形隨時(shí)間圖像逐漸顯示在它的右下方。
首先,先把思路架構(gòu)起來,因?yàn)閷?duì)像素操作,所以需要用到canvas。
然后,我們 需要畫一個(gè)矩形,并且需要獲取到它的每一個(gè)像素的值,即每一個(gè)像素的4要素,rgba。(方法getImageData,4個(gè)參數(shù),前兩個(gè)坐標(biāo),X和Y,后兩個(gè)是長(zhǎng)和寬)
最后,用一個(gè)定時(shí)器實(shí)現(xiàn)逐漸顯示的功能。(顯示可以用putImageData,3個(gè)參數(shù),第一個(gè)是需要顯示的圖像,第二和第三是坐標(biāo)值XY)
然后我們開始動(dòng)手敲代碼:
我們可以先做出一個(gè)沒有定時(shí)器的,也就是先試著獲取到原矩形1/10的像素點(diǎn),然后顯示出來。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ background-color: black; } canvas{ background-color: white; } </style> <title>Title</title> <script> window.onload = function(){ var oC = document.querySelector("#c"); var oGc = oC.getContext("2d"); oGc.fillRect(0,0,100,100);//畫原矩形 var rectData = oGc.getImageData(0,0,100,100);//獲取原矩形的像素點(diǎn)的值 var w = rectData.width;//原矩形的寬 var h = rectData.height;//原矩形的長(zhǎng) var dataC = randomData(w*h,w*h/10);//randomData方法實(shí)現(xiàn)隨機(jī)從原矩形的像素點(diǎn)中抽取一部分出來 var newData = oGc.createImageData(w,h);//創(chuàng)造一個(gè)新的矩形 //dataC數(shù)組中存放的是第幾個(gè)像素,*4是為了把圖片的data數(shù)組定位到這個(gè)像素的數(shù)據(jù)的第一個(gè)值,然后加一是第二個(gè),以此類推。 for(var j=0;j<dataC.length;j++){ newData.data[4*dataC[j]]=rectData.data[4*dataC[j]]; newData.data[4*dataC[j]+1]=rectData.data[4*dataC[j]+1]; newData.data[4*dataC[j]+2]=rectData.data[4*dataC[j]+2]; newData.data[4*dataC[j]+3]=rectData.data[4*dataC[j]+3]; } oGc.putImageData(newData,w,h); function randomData(allNum,nowNum) { var dataA = []; var dataB = []; for(var i=0;i<allNum;i++){ dataA.push(i); } for(var i=0;i<nowNum;i++){ dataB.push(dataA.splice(Math.floor(Math.random()*dataA.length),1)); } return dataB; } } </script> </head> <body> <canvas id="c" width="400" height="400"></canvas> </body> </html>
其中因?yàn)間etImageData的data屬性是一個(gè)數(shù)組,而且數(shù)組中的存放的東西,就是我們需要的rgba4個(gè)數(shù),存放形式為:
data[0]第一個(gè)像素點(diǎn)的r值:
data[1]:第一個(gè)像素點(diǎn)的g值
data[2]:第一個(gè)像素點(diǎn)的b值
data[3]:第一個(gè)像素點(diǎn)的a值
data[4]:第二個(gè)像素點(diǎn)的r值
data[5]:第二個(gè)像素點(diǎn)的g值
以此類推,4個(gè)一循環(huán)。
然后數(shù)組dataC里面存放的是取出的像素點(diǎn)位置,然后用乘以4和分別加一,加二,加三為了定位到每一個(gè)像素點(diǎn)的rgba分別的4個(gè)值。此時(shí)就能實(shí)現(xiàn)抽取一部分像素點(diǎn)顯示的功能。
最后,將代碼改進(jìn)。
第一步,我們需要改進(jìn)randomData這個(gè)函數(shù),使之返回的數(shù)組是包含原矩形的所有像素。
function randomData(allNum,nowNum) { var dataA = []; var dataB = []; for(var i=0;i<allNum;i++){ dataA.push(i); } for(var i=0;i<allNum/nowNum;i++){ var otherData = []; for(var j=0;j<nowNum;j++){ otherData.push(dataA.splice(Math.floor(Math.random()*dataA.length),1)); } dataB.push(otherData); } return dataB; }
嵌套了一層for循環(huán),使返回的dataB數(shù)組里面分成了一定組數(shù)的一定量個(gè)像素點(diǎn)。
然后增加一個(gè)定時(shí)器,最終代碼為:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ background-color: black; } canvas{ background: #fff; } </style> <title>Title</title> <script> window.onload = function(){ var oC = document.querySelector("#c"); var oGc = oC.getContext("2d"); oGc.fillRect(0,0,100,100); var rectData = oGc.getImageData(0,0,100,100); var w = rectData.width; var h = rectData.height; var dataC = randomData(w*h,w*h/10); var newData = oGc.createImageData(w,h); var iNum = 0; var timer = setInterval(function () { for(var j=0;j<dataC[iNum].length;j++){ newData.data[4*dataC[iNum][j]]=rectData.data[4*dataC[iNum][j]]; newData.data[4*dataC[iNum][j]+1]=rectData.data[4*dataC[iNum][j]+1]; newData.data[4*dataC[iNum][j]+2]=rectData.data[4*dataC[iNum][j]+2]; newData.data[4*dataC[iNum][j]+3]=rectData.data[4*dataC[iNum][j]+3]; } oGc.putImageData(newData,w,h); if(iNum<9){ iNum++; } else{ iNum=0; oGc.clearRect(w,h,w,h); for(var i=0;i<newData.data.length;i++){ newData.data[i]=0; } } },200); function randomData(allNum,nowNum) { var dataA = []; var dataB = []; for(var i=0;i<allNum;i++){ dataA.push(i); } for(var i=0;i<allNum/nowNum;i++){ var otherData = []; for(var j=0;j<nowNum;j++){ otherData.push(dataA.splice(Math.floor(Math.random()*dataA.length),1)); } dataB.push(otherData); } return dataB; } } </script> </head> <body> <canvas id="c" width="400" height="400"></canvas> </body> </html>
其中31到35行的for循環(huán)還是一樣將原矩形的像素點(diǎn)傳遞給新矩形。但是這一次是用iNum來實(shí)現(xiàn)分批次的傳遞和顯示。注意這里的dataC,也就是randomData函數(shù)返回的數(shù)組是一個(gè)二維數(shù)組。最后用一個(gè)if—else判斷來控制計(jì)時(shí)器的繼續(xù)計(jì)時(shí)和停止計(jì)時(shí)。
關(guān)于“如何利用純JS實(shí)現(xiàn)像素逐漸顯示”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。