溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何利用純JS實現像素逐漸顯示，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創建和修改等。7、基于Node.js技術進行服務器端編程。
前言
對于新手的我，以前從來沒有做過對像素進行操作的實例。于是把資料書找了出來，實現了這個功能，比較簡單，大神勿噴。下面是效果圖，因為重在思路，效果就簡陋一些。
實現思路
其實就是簡單的用JS實現將左上角的矩形隨時間圖像逐漸顯示在它的右下方。
首先，先把思路架構起來，因為對像素操作，所以需要用到canvas。
然后，我們 需要畫一個矩形，并且需要獲取到它的每一個像素的值，即每一個像素的4要素，rgba。（方法getImageData，4個參數，前兩個坐標，X和Y，后兩個是長和寬）
最后，用一個定時器實現逐漸顯示的功能。（顯示可以用putImageData，3個參數，第一個是需要顯示的圖像，第二和第三是坐標值XY）
然后我們開始動手敲代碼：
我們可以先做出一個沒有定時器的，也就是先試著獲取到原矩形1/10的像素點，然后顯示出來。
<!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);//獲取原矩形的像素點的值
var w = rectData.width;//原矩形的寬
var h = rectData.height;//原矩形的長
var dataC = randomData(w*h,w*h/10);//randomData方法實現隨機從原矩形的像素點中抽取一部分出來
var newData = oGc.createImageData(w,h);//創造一個新的矩形
//dataC數組中存放的是第幾個像素，*4是為了把圖片的data數組定位到這個像素的數據的第一個值，然后加一是第二個，以此類推。
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>其中因為getImageData的data屬性是一個數組，而且數組中的存放的東西，就是我們需要的rgba4個數，存放形式為：
data[0]第一個像素點的r值:
data[1]:第一個像素點的g值
data[2]:第一個像素點的b值
data[3]:第一個像素點的a值
data[4]:第二個像素點的r值
data[5]:第二個像素點的g值
以此類推，4個一循環。
然后數組dataC里面存放的是取出的像素點位置，然后用乘以4和分別加一，加二，加三為了定位到每一個像素點的rgba分別的4個值。此時就能實現抽取一部分像素點顯示的功能。
最后，將代碼改進。
第一步，我們需要改進randomData這個函數，使之返回的數組是包含原矩形的所有像素。
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循環，使返回的dataB數組里面分成了一定組數的一定量個像素點。
然后增加一個定時器，最終代碼為：
<!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循環還是一樣將原矩形的像素點傳遞給新矩形。但是這一次是用iNum來實現分批次的傳遞和顯示。注意這里的dataC，也就是randomData函數返回的數組是一個二維數組。最后用一個if—else判斷來控制計時器的繼續計時和停止計時。
關于“如何利用純JS實現像素逐漸顯示”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
