Question

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

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卡瓦斯，这只是作为一个例子）。

Answer 1

有很多问题

cont.getImageData是一个函数而不是属性
imdt不是画布的图像数据，它是画布图像数据的副本。

您需要调用cont.putImageData将数据复制回画布
imdt.data.length是字节数而非像素数。每个像素有4个字节。
图像数据中的alpha值介于0到255之间

＆＃13;

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();

＆＃13;

<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>

＆＃13;

如何逐个像素填充画布？

1 个答案: