Javascript JS/canvas putImageData失败

下面的代码失败，没有错误，只是没有将所有像素保持为绿色。由此产生的噪音效果很酷，但我希望它们是绿色的。 我认为错误是因为我正在复制行，但没有将其与RGBA阅读框对齐。小提琴在这里：

var s=document.getElementById（'s'）；
s、 宽度=640；
s、 高度=480；
var x=s.getContext（'2d'）；
变种；
var-ppx；
函数数组副本（src、sstart、dst、dstart、length）{
对于（变量i=sstart；i0）{
ppx[y+1]=ppx[y-1919]；
}
打破
案例（2）：
如果（y-4>0）{
ppx[y+1]=ppx[y-3]；
}
打破
案例（3）：
ppx[y+1]=parseInt（Math.round（Math.random（））*255）；
如果（y+1921

工作小提琴：

以下代码起作用，具有4种不同的绘图功能（具有不同的级别）：

var s=document.getElementById（'s'）；
s、 宽度=640；
s、 高度=395；
var高度=s高度；
var heightover2=高度/2.0；
var widthby4=s.width*4；
var x=s.getContext（'2d'）；
变种；
var-ppx，像素；
函数数组副本（src、sstart、dst、dstart、length）{
对于（变量i=sstart；i0）{
a[l]=c；
}
返回a；
};
函数loadPixels（）{
idata=x.getImageData（0,0，s.宽度，s.高度）；
ppx=idata.data；
idata=x.getImageData（0,0，s.宽度，s.高度）；
像素=idata.data；
}
函数updatePixels（）{
idata.data=像素；
x、 putImageData（idata，0,0）；
}
函数设置_static（）{
loadPixels（）；
对于（变量y=0；y0）{
ppx[y+1]=ppx[y-widthby4+1]；
}
打破
案例（2）：
如果（y-4>0）{
ppx[y+1]=ppx[y-3]；
}
打破
案例（3）：
ppx[y+1]=parseInt（Math.round（Math.random（））*255）；
如果（y+宽度比4+1

HTML/CSS：

<style>
#s {
    width:640px;
    height:395px;
    background:black;   
}
</style>
<canvas id="s"></canvas>

#{
宽度：640px；
身高：395px；
背景：黑色；
}

我在Firebug的控制台中看到“ReferenceError:requestAnimationFrame未定义”…哦？你应该使用谷歌浏览器你到底想干什么？有一条静电擦拭带

var s = document.getElementById('s');
s.width = 640;
s.height = 395;
var height = s.height;
var heightover2 = height/2.0;
var widthby4 = s.width*4;
var x = s.getContext('2d');
var idata;
var ppx,pixels;
function arrayCopy(src,sstart,dst,dstart,length) {
           for(var i = sstart; i < sstart+length;i+=1 ) {
                  dst[dstart++] = src[i];
           }
    }
function fillArray(a,c,l) {
    a = new Array(l);
    while(l-- > 0) {
        a[l] = c;
    }
    return a;
};
function loadPixels() {
    idata = x.getImageData(0,0,s.width,s.height);
    ppx = idata.data;
    idata = x.getImageData(0,0,s.width,s.height);
    pixels = idata.data;
}
function updatePixels() {
    idata.data = pixels;
    x.putImageData(idata,0,0);
}
function setup_static() {
      loadPixels();
      for (var y = 0; y < ppx.length-4;y+=2) {
          var spread = Math.round(Math.random()*4);
          switch(spread) {
        case(1):
            if(y-widthby4+1 > 0) {
            ppx[y+1] = ppx[y-widthby4+1];
            }
            break;
        case(2):
            if(y-4 > 0) {
            ppx[y+1] = ppx[y-3];
            }
            break;
        case(3):
            ppx[y+1] = parseInt(Math.round(Math.random())*255);
            if(y+widthby4+1 < ppx.length) {
            ppx[y+widthby4+1] = ppx[y+1];
            }
            break;
        case(4):
            ppx[y+1] = parseInt(Math.round(Math.random())*255);
            if(y+5 < ppx.length) {
            ppx[y+5] = ppx[y+1];
            }
            break;
        case(0):
            break;
          };
    }
}
setup_static();
//arrayCopy(ppx,0,pixels,0,ppx.length);
//updatePixels();
// height rows of feedback per frame and no reading frame alignment
function draw() {
    for (y = 0; y < height; y += 1) {
        arrayCopy(pixels, parseInt(Math.round(Math.random() * (heightover2))), pixels, y * widthby4, widthby4);
    }
    updatePixels();
    requestAnimationFrame(draw);
}
//arrayCopy(ppx,0,pixels,0,ppx.length);
//draw();
// height rows of feedback per frame
function draw1() {
    for(y = 0; y < height;y+=1) {
        var row = parseInt( Math.round(Math.random()*(heightover2)));
        row -= row%2;
            arrayCopy(pixels,row, pixels, y*widthby4,widthby4);
    }
    updatePixels();
    requestAnimationFrame(draw1);
}
//arrayCopy(ppx,0,pixels,0,ppx.length);
//draw1();
// no feedback beyond 1 frame
function draw2() {
    for(y = 0; y < height;y+=1) {
        var row = parseInt( Math.round(Math.random()*(heightover2)));

        row -= row%2;
            arrayCopy(ppx,row, pixels, y*widthby4,widthby4);
    }
    for(y = 0; y < height;y+=1) {
        var row = parseInt( Math.round(Math.random()*(heightover2)));

        row -= row%2;
            arrayCopy(pixels,row, pixels, y*widthby4,widthby4);
    }
    updatePixels();
    requestAnimationFrame(draw2);
}
//draw2();
// 1 row of feedback per frame
function draw3() {
    for(y = 0; y < height;y+=1) {
        var row = parseInt( Math.round(Math.random()*(heightover2)));

        row -= row%2;
            arrayCopy(ppx,row, pixels, y*widthby4,widthby4);
    }
    for(y = 0; y < height;y+=1) {
        var row = parseInt( Math.round(Math.random()*(heightover2)));

        row -= row%2;
            arrayCopy(pixels,row, pixels, y*widthby4,widthby4);
    }
    var row = parseInt( Math.round(Math.random()*(heightover2)));
    arrayCopy(pixels,row,ppx,row*widthby4,widthby4);
    updatePixels();
    requestAnimationFrame(draw3);
}
draw3();

<style>
#s {
    width:640px;
    height:395px;
    background:black;   
}
</style>
<canvas id="s"></canvas>