javascript - 如何逐像素填充 Canvas ？

Question

我正在尝试设置 Canvas 上所有像素的颜色。我很确定我知道它是如何工作的: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];
    }
}

如果有人能告诉我为什么这不会改变 Canvas 像素颜色，那就太棒了(我实际上没有使用 2x2 卡瓦，这只是作为一个例子)。

Answer 1

有很多问题

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

2. imdt 不是 Canvas 的图像数据，它是 Canvas 图像数据的副本。

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

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>

请注意，将数据视为 32 位值可能会更快，因此每个像素都有一个值

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);
    
    // make a Uint32 view of the image data
    var pixels = new Uint32Array(imdt.data.buffer);  
    var r     = 0xFF0000FF;
    var g     = 0xFF00FF00;
    var b     = 0xFFFF0000;
    var y     = 0xFF00FFFF;
    
    pixels[0] = r;
    pixels[1] = g;
    pixels[2] = b;
    pixels[3] = y;
  
    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>