如何逐像素填充 canvas?
How can I fill the canvas pixel by pixel?
我正在尝试设置 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];
}
}
如果有人能告诉我为什么这不会改变 canvases 像素颜色,那就太棒了(我实际上并没有使用 2x2 cavas,那只是作为一个例子)。
有一堆问题
cont.getImageData
是函数而不是 属性
imdt
不是 canvas 的图像数据,它是 canvas 图像数据的副本。
您需要调用cont.putImageData
将数据复制回canvas
imdt.data.length 是字节数而不是像素数。每个像素有 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>
我正在尝试设置 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];
}
}
如果有人能告诉我为什么这不会改变 canvases 像素颜色,那就太棒了(我实际上并没有使用 2x2 cavas,那只是作为一个例子)。
有一堆问题
cont.getImageData
是函数而不是 属性imdt
不是 canvas 的图像数据,它是 canvas 图像数据的副本。您需要调用
cont.putImageData
将数据复制回canvasimdt.data.length 是字节数而不是像素数。每个像素有 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>