如何逐像素填充画布？

Question

我正在尝试设置画布上所有像素的颜色。 我非常确定我知道它是如何工作的： canvas.getContext("2d").getImageData.data前4个值是指第一个像素的r，g，b和a，第二个是第二个像素，等等。 我想知道这段代码有什么问题：

function draw()
{
    var cnvs = document.getElementById("CanvasFlynn"); //Assume it's 2x2 pixels
    var cont  = cnvs.getContext("2d");
    var imdt  = cont.getImageData(0,0,2,2);
    var r     = [ 255 , 0 , 0 , 255 ];
    var g     = [ 0 , 255 , 0 , 255 ];
    var b     = [ 0 , 0 , 255 , 255 ];
    var a     = [ 1 , 1 , 1 , 1 ];
    var index = 0;
    for ( var i = 0 ; i < imdt.data.length ; i++ )
    {
        index              = 4*i;
        imdt.data[index]   = r[i];
        imdt.data[index+1] = g[i];
        imdt.data[index+2] = b[i];
        imdt.data[index+3] = a[i];
    }
}

如果有人能告诉我为什么它不能改变画布的像素颜色，那会晃动（我实际上并没有使用2x2的cavas，这只是作为示例）。

Answer 1

有很多问题

1. cont.getImageData是函数而不是属性

2. imdt不是画布的图像数据，而是画布的图像数据的副本。

   您需要调用cont.putImageData将数据复制回画布

3. imdt.data.length是字节数而不是像素数。 每个像素有4个字节。

4. 图像数据中的alpha值在0到255之间

 function draw() { var cnvs = document.getElementById("CanvasFlynn"); //Assume it's 2x2 pixels var cont = cnvs.getContext("2d"); var imdt = cont.getImageData(0, 0, 2, 2); var r = [ 255 , 0 , 0 , 255 ]; var g = [ 0 , 255 , 0 , 255 ]; var b = [ 0 , 0 , 255 , 255 ]; var a = [ 255 , 255 ,255 ,255 ]; var index = 0; for ( var i = 0 ; i < imdt.data.length / 4 ; i++ ) { index = 4*i; imdt.data[index] = r[i]; imdt.data[index+1] = g[i]; imdt.data[index+2] = b[i]; imdt.data[index+3] = a[i]; } cont.putImageData(imdt, 0, 0); } draw(); 

 <p>Note the 2x2 canvas will be stretched to 100x100 and may be bilinear filtered</p> <canvas id="CanvasFlynn" width="2" height="2" style="width: 100px; height: 100px; border: 1px solid black; image-rendering: pixelated;"></canvas>