用纯JS实现像素渐变显示的一个例子

序

作为新手，我之前从来没有做过操作像素的例子。于是我找出了数据本，实现了这个功能。比较简单，不要喷。下面是渲染，因为强调的是思考，效果简单。

实现理念

其实通过JS简单的实现了左上角的矩形随着时间的推移逐渐显示在右下角。

首先先构造思路，因为像素运算，需要画布。

然后，我们需要画一个矩形，得到每个像素的值，也就是每个像素的四个元素，rgba。(方法getImageData，4个参数，前两个坐标是x和y，后两个是长度和宽度)

最后用定时器实现渐显功能。(putImageData可用于显示，有三个参数，第一个是要显示的图像，第二个和第三个是坐标值XY)

然后我们开始输入代码：

我们可以先做一个没有计时器的，也就是先试着得到原来矩形的1/10像素，然后显示出来。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' style body { background-color : black；} canvas{ background-color:白色；}/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。getimage数据(0，0，100，100)；//获取原始矩形的像素值var w=rect data . width；//原始矩形的宽度var h=rectData.height//原始矩形的长度var dataC=randomData(w*h，w * h/10)；//randomData方法用于从原始矩形中随机提取一部分像素。Var新数据=OGC。创建图像数据(w，h)；//新建一个矩形//什么像素存储在//dataC数组中，*4是将图片的数据数组定位到这个像素的数据的第一个值，然后加一为第二个，以此类推。for(var j=0；jdataC.lengthj){ new DATa . data[4 * DataC[j]]=rect DATa . data[4 * DataC[j]]；new DATa . data[4 * DataC[j]1]=RECTDATa . data[4 * DataC[j]1]；new DATa . data[4 * DataC[j]2]=RECTDATa . data[4 * DataC[j]2]；new DATa . data[4 * DataC[j]3]=RECTDATa . data[4 * DataC[j]3]；} oGc.putImageData(newData，w，h)；函数randomData(allNum，nowNum){ var dataA=[]；var DataB=[]；for(var I=0；iallNumI){ DataA . push(I)；} for(var I=0；inowNumI){ DataB . push(DataA . splice(Math . floor(Math . random()* DataA . length)，1))；}返回dataB} }/script/headsdycanavas id=' c ' width=' 400 ' height=' 400 '/canvas/body/html，因为getImageData的data属性是一个数组，数组中存储的是我们需要的RGB A4s的个数，存储形式是：

第一像素的数据[0] R值第一像素的数据[1]: G值第一像素的数据[2]: B值第一像素的数据[3]: A值第一像素的数据[4]: R值第二像素的数据[5]: G值

然后，将像素的位置存储在数组dataC中，然后乘以4，分别加上1、2和3，以定位每个像素的rgba的四个值。此时，可以实现提取一些像素进行显示的功能。

最后，对代码进行了改进。

在第一步中，我们需要改进randomData函数，使其返回的数组包含原始矩形的所有像素。

函数randomData(allNum，nowNum){ var dataA=[]；var DataB=[]；for(var I=0；iallNumI){ DataA . push(I)；} for(var I=0；ialnum/nowNum；I){ var OtherDATa=[]；for(var j=0；jnowNumj){ other data . push(dataa . splice(math . floor(math . random()* dataa . length)，1))；} DataB . push(other DATa)；}返回dataB} for循环的一层是嵌套的，因此返回的dataB数组被分成一定数量的像素和一定数量的组。

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' style body {底色：黑色；}画布{ background : # fff }/样式标题标题/标题脚本窗口。onload=function(){ var oC=document。query selector(' c ')；var oGc=oc。GetContext(' 2d ')；oGc.fillRect(0，0，100，100)；var rectData=oGc.getImageData(0，0，100，100)；var w=直接数据。宽度；var h=rect data . height var dataC=randomData(w * h，w * h/10)；var新数据=OGC。createimagedata(w，h)；var Inum=0；var timer=setInterval(function(){ for(var j=0；jdataC[iNum].长度；j){新数据。data[4 * DataC[Inum][j]]=rect data。data[4 * DataC[Inum][j]]；new DATa。data[4 * DataC[InUM][j]1]=RECTDATA。data[4 * DataC[Inum][j]1]；new DATa。data[4 * DataC[Inum][j]2]=rect data。data[4 * DataC[Inum][j]2]；new DATa。data[4 * DataC[InUM][j]3]=rect data。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；inewdata。数据。长度；I){ new DATa。数据[I]=0；} } },200);函数randomData(allNum，nowNum){ var dataA=[]；var DataB=[]；for(var I=0；ialnumi){ DataA。推(我)；} for(var I=0；ial num/NoWnum；I){ var other data=[]；for(var j=0；jnowNumj){其他数据。push(dataa。拼接(数学。地板(数学。random()* dataa。长度)，1))；} DataB。push(其他数据)；}返回DataB } }/script/head dycanvas id=' c ' width=' 400 ' height=' 400 '/canvas/body/html其中31到35行的为循环还是一样将原矩形的像素点传递给新矩形。但是这一次是用iNum来实现分批次的传递和显示。注意这里的dataC，也就是随机数据函数返回的数组是一个二维数组。最后用一个如果——否则判断来控制计时器的继续计时和停止计时。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。