怎么看每个像素的画布HTML5正在改变画布、怎么看、像素
我创建了一个JavaScript的一个过滤器，反转图像即颜色创建一个负面形象，现在当我在浏览器中运行它需要一定的时间来处理，然后返回最终的负面形象。我怎样才能看到图像的每个像素被反转，而不仅仅是最后的倒影？而不是等待的code是整个像素阵列上实现，然后看看它的效果，我想看看每个像素由code被改变，直到最后一个像素。
VAR imgData = ctx.getImageData（0,0，x.width，x.height）;
变种D = imgData.data;
对于（VAR I = 0; I＆LT; d.length; I + = 4）{
D [I] = 255 - D [I];
D [I + 1] = 255 - D [I + 1];
D [I + 2] = 255 - D [I + 2];
}
ctx.putImageData（imgData，0,0）;
新的code
反转（D，0）;
功能反转（D，I）{
如果（ⅰ＆其中; d.length）{
D [I] = 255 - D [I];
D [I + 1] = 255 - D [I + 1];
D [I + 2] = 255 - D [I + 2];
D [i + 3中] = D [i + 3中];
//警报（ⅰ）;
变种N = I / 4;
VAR H = parseInt函数（N / x.width）;
变种W = N - H * x.width;
ctx.fillStyle ='RGBA（'+ D [I] +'，'+ D [I + 1] +'，'+ D [I + 2] +'，'+ D [i + 3中] / 255 +' ）;
ctx.fillRect（W，H，1,1）;
//如果（ⅰ＆GT; 91000）{警报（ⅰ）;}
的setTimeout（反转（D，I + 4），50）;
}
其他{返回;}
}
解决方案 
您可以 context.fillRect 每一个新变化像素，因为它是计算在画布上。
像这样的东西（的警告：未经检验的code，可能需要tweeks 的）：
变种N = I / 4;
变种Y = parseInt函数（N / canvas.width）;
VAR X = N-Y * canvas.width;
context.fillStyle ='RGBA（'+ D [I] +'，'+ D [I + 1] +'，'+ D [I + 2] +'，'+ D [i + 3中] / 255'） ';
context.fillRect（X，Y，1,1）;
下面的演示code，首先做反相，然后显示在一段时间的效果：
VAR帆布=的document.getElementById（帆布）;
VAR CTX = canvas.getContext（2D）;
变种CW = canvas.width;
变种CH = canvas.height;
变种nextTime = 0;
//变换图像的一个新行，将显示
//这延迟后
VAR延迟= 1000至60年* 2;
变种Y = 0;
VAR imgData，D;
VAR IMG =新的图像（）;
img.crossOrigin ='匿名';
img.onload =启动;
img.src =https://dl.dropboxusercontent.com/u/139992952/multple/sun.png;
函数的start（）{
CW = canvas.width = img.width;
CH = canvas.height = img.height;
ctx.drawImage（IMG，0,0）;
imgData = ctx.getImageData（0,0，连续波，CH）;
D = imgData.data;
对于（VAR I = 0; I＆LT; d.length; I + = 4）{
D [I] = 255 - D [I];
D [I + 1] = 255 - D [I + 1];
D [I + 2] = 255 - D [I + 2];
}
requestAnimationFrame（动画）;
}
功能动画（时间）{
如果（时间LT; nextTime）{requestAnimationFrame（动画）;返回;}
nextTime =时间+延迟;
为（变种X = 0 X - 其中，连续波; X ++）{
VAR I =（Y * CW + X）* 4;
ctx.fillStyle ='RGBA（'+ D [I] +'，'+ D [I + 1] +'，'+ D [I + 2] +'，'+ D [i + 3中] / 255 +' ）;
ctx.fillRect（X，Y，1,1）;
}
如果（+ Y'LT; CH）{
requestAnimationFrame（动画）;
}其他{
ctx.putImageData（imgData，0,0）;
}
}
身体{背景色：象牙色; }
#canvas {边界：1px的纯红色;}
＆LT;帆布ID =画布宽度= 300高度= 300＆GT;＆LT; /帆布＆GT;
I've created a filter in javascript which inverts the colors of image i.e creates a negative image, now when I run it in the browser it takes time to process and then returns the final negative image. How can I see each pixel of the image being inverted and not just the final inverted image? Instead of waiting for the the code to be implemented on the whole pixel array and then see its effects, I want to see each pixel being changed by the code till the last pixel.
var imgData = ctx.getImageData(0,0,x.width,x.height);
var d = imgData.data;
for (var i=0; i< d.length; i+=4) {
d[i] = 255 - d[i];
d[i+1] = 255 - d[i+1];
d[i+2] = 255 - d[i+2];
}
ctx.putImageData(imgData,0,0);
NEW CODE
invert(d,0);
function invert(d,i){
if(i < d.length){
d[i] = 255 - d[i];
d[i+1] = 255 - d[i+1];
d[i+2] = 255 - d[i+2];
d[i+3] = d[i+3];
//alert(i);
var n=i/4;
var h=parseInt(n/x.width);
var w = n - h*x.width;
ctx.fillStyle='rgba('+d[i]+','+d[i+1]+','+d[i+2]+','+d[i+3]/255+')';
ctx.fillRect(w,h,1,1);
//if(i>91000){alert(i);}
setTimeout(invert(d,i+4),50);
}
else{return ;}
}
解决方案
You could context.fillRect each newly changed pixel on the canvas as it's calculated.
Something like this (warning: untested code, may need tweeks!):
var n=i/4;
var y=parseInt(n/canvas.width);
var x=n-y*canvas.width;
context.fillStyle='rgba('+d[i]+','+d[i+1]+','+d[i+2]+','+d[i+3]/255')';
context.fillRect(x,y,1,1);
Here's demo code that first does the inverting and then shows the effect over time:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var nextTime=0;
// a new line of converted image will be displayed
// after this delay
var delay=1000/60*2;
var y=0;
var imgData,d;
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/sun.png";
function start(){
cw=canvas.width=img.width;
ch=canvas.height=img.height;
ctx.drawImage(img,0,0);
imgData=ctx.getImageData(0,0,cw,ch);
d=imgData.data;
for (var i=0; i< d.length; i+=4) {
d[i] = 255 - d[i];
d[i+1] = 255 - d[i+1];
d[i+2] = 255 - d[i+2];
}
requestAnimationFrame(animate);
}
function animate(time){
if(time<nextTime){requestAnimationFrame(animate); return;}
nextTime=time+delay;
for(var x=0;x<cw;x++){
var i=(y*cw+x)*4;
ctx.fillStyle='rgba('+d[i]+','+d[i+1]+','+d[i+2]+','+d[i+3]/255+')';
ctx.fillRect(x,y,1,1);
}
if(++y<ch){
requestAnimationFrame(animate);
}else{
ctx.putImageData(imgData,0,0);
}
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
