用纯js逐步显示像素的一个例子

前言

至于新手，我以前从来没有做过一个像素操作的例子。所以数据本是找到的，这个功能的实现，比较简单，大神不喷。下面是效果图，因为强调思路，效果很简单。

实现思路

实际上，只需使用js实现，逐步在左上角显示矩形，并在右下方显示时间图像。

首先，由于像素的操作，我们首先要建立这个想法，所以我们需要使用画布。

然后，我们需要画一个矩形，我们需要得到每一个像素，这是价值4元的每个像素，RGBA。（方法getimagedata，4个参数，第一个坐标，x和y，和最后的两个长和宽）

最后，一个定时器来实现功能，逐渐显示出来。（可以显示putimagedata，3个参数，第一个是需要显示的图像，在第二和第三坐标XY）。

然后我们开始敲代码：

我们首先可以创建一个非计时器，也就是说，首先尝试获取原始矩形1 10的像素，然后显示它。

体{
背景颜色：黑色；
}
帆布{
背景颜色：白色；
}

标题

在window.onload =函数（）{
VaR OC = document.queryselector（# C ）；
VaR OGC = oc.getcontext（2D）；
ogc.fillrect（00100100）； / /画矩形

无功rectdata = ogc.getimagedata（00100100）； / /得到矩形的原始像素值
无功W = rectdata.width； / /原矩形的宽度
var H = rectdata.height； / /一个矩形的原始长度

VaR数据模拟计算机=随机（W×H，W×H / 10）； / /随机方法实现了随机抽取的一部分像素从原来的矩形
VaR ogc.createimagedata newdata =（W，H）； / /创建一个新的矩形
/ /数据模拟计算机阵列存储在前几个像素，4是定位图像数据阵列的像素数据的第一个值，然后添加一个第二，等等。
对于（var j = 0；J < datac.length；j++）{
新的数据。数据{ 4 } } = { J数据模拟计算机rectdata。数据{ 4 } } { J数据模拟计算机；
新的数据。数据{ 4 } { 1 }数据模拟计算机J = rectdata。数据{ 4 } { 1 } J数据模拟计算机；
新的数据。数据{ 4 } { 2 }数据模拟计算机J = rectdata。数据{ 4 } { 2 } J数据模拟计算机；
新的数据。数据{ 4 } { 3 }数据模拟计算机J = rectdata。数据{ 4 } { 3 } J数据模拟计算机；
}
ogc.putimagedata（最新数据，W，H）；

Function randomData (allNum, nowNum) {
VaR数据= { }；
VaR数据库= { }；
对于（var i = 0；i < allnum；i++）{
DataA.push（我）；
}

对于（var i = 0；i < nownum；i++）{
DataB.push（dataa.splice（math.floor（Math.random（）*数据长度），1））；

}
返回数据库；

}

}
这是因为getimagedata数据属性是一个数组，而且数组中存储的是rgba4我们需要的数量，这是存储在表单：

数据{ 0 }第一像素点的r值：
数据{ 1 }：第一个像素点的G值
数据{ 2 }：第一个像素点的B值
数据{ 3 }：第一个像素点的值
数据{ 4 }：第二像素的r值
数据{ 5 }：第二像素的g值
类推，4个周期。

然后，像素的位置存储阵列中的数据模拟计算机，然后乘以4，再加三，分别确定每个像素的RGBA的值是4。在这一点上，提取像素部分的功能可以实现。
最后，改进了代码。

在第一步中，我们需要这样的数组返回的所有像素包含原始矩形提高了随机函数。

函数随机（allnum，nownum）{
VaR数据= { }；
VaR数据库= { }；
对于（var i = 0；i < allnum；i++）{
DataA.push（我）；
}

对于（var i = 0；i < allnum / nownum；i++）{
VaR数据= { }；
对于（var j = 0；J < nownum；j++）{
OtherData.push（dataa.splice（math.floor（Math.random（）*数据长度），1））；
}
DataB.push（数据）；
}
返回数据库；
}
一层for循环嵌套，使返回的数据阵列分为若干组一定数量的像素。

然后添加一个计时器，最后的代码是：

体{
背景颜色：黑色；
}
帆布{
背景：# FFF；
}

标题

在window.onload =函数（）{
VaR OC = document.queryselector（# C ）；
VaR OGC = oc.getcontext（2D）；
（00100100）ogc.fillrect；

无功rectdata = ogc.getimagedata（00100100）；
无功W = rectdata.width；
var H = rectdata.height；
VaR数据模拟计算机=随机（W×H，W×H / 10）；
VaR ogc.createimagedata newdata =（W，H）；

var iNum = 0；

VaR定时器= setInterval（）函数（）{
对于（var j = 0；} {析{J}. <数据模拟计算机。长度；j++）{
新的数据。数据{ 4 } { } {数据模拟计算机析{J}. } = rectdata。数据{ 4 * { } { }数据模拟计算机析{J}. }；
新的数据。数据{ 4 } { } {数据模拟计算机析{J}. + 1 } = rectdata。数据{ 4 * { } { }析{J}.数据模拟计算机+ 1 }；
新的数据。数据{ 4 } { } {数据模拟计算机析{J}. + 2 } = rectdata。数据{ 4 * { } { }析{J}.数据模拟计算机+ 2 }；
新的数据。数据{ 4 } { } {数据模拟计算机析{J}. + 3 } = rectdata。数据{ 4 * { } { }析{J}.数据模拟计算机+ 3 }；

}
ogc.putimagedata（最新数据，W，H）；

如果（析< 9）{
微粒+ +；
}
别的{
iNum = 0；
ogc.clearrect（W，H，W，H）；
对于（var i = 0；i < newdata.data.length；i++）{
新的数据。数据{我} = 0；
}
}
}，200）；
函数随机（allnum，nownum）{
VaR数据= { }；
VaR数据库= { }；
对于（var i = 0；i < allnum；i++）{
DataA.push（我）；
}

对于（var i = 0；i < allnum / nownum；i++）{
VaR数据= { }；
对于（var j = 0；J < nownum；j++）{
OtherData.push（dataa.splice（math.floor（Math.random（）*数据长度），1））；
}
DataB.push（数据）；
}
返回数据库；
}

}
对31到35线回路仍通过原有矩形的矩形相同。但这一次是微粒实现批量传输和显示的使用。注意，这里的数据模拟计算机，即随机函数返回的数组是一个二维数组的最后一个。如果其他人的判断是用于控制定时器的持续时间和停止时间。

总结

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问，您可以留言交流，谢谢您的支持。