Html 在画布上X，Y坐标处绘制像素的公式

所以我知道HTML5画布像素方法与普通方法有点不同。我正在从Scala Swing应用程序移植光线跟踪器，其中旧的绘制方法如下所示：

for {
  x <- pixels.s.indices
  y <- pixels.s(x).indices
} {
  g.setColor(pixels.s(x)(y))
  g.fillRect(x, y, x, y)
}

即，它精确地映射到二维笛卡尔平面

所以现在我稍微改变了方向，我有了一个扁平的对象数组，有

x

，

y

和

颜色

：

[{ x: 0, y: 0, color: { red: 33, green: 220, blue: 181 },
 { x: 0, y: 1, color: { red: 33, green: 220, blue: 231 },
 { x: 0, y: 2, color: { red: 33, green: 220, blue: 221 },
 ...
 { x: 319, y: 238, color: { red: 23, green: 10, blue: 31 },
 { x: 319, y: 239, color: { red: 13, green: 120, blue: 11 }]

我正试图使用以下代码在屏幕上绘制平展的颜色数组：

var imageData = context.createImageData(width, height);
var numPixels = width*height;
for (var i = 0; i < numPixels; i++) {
  imageData.data[(i*4)]     = tracedScene[i].color.red;
  imageData.data[(i*4) + 1] = tracedScene[i].color.green;
  imageData.data[(i*4) + 2] = tracedScene[i].color.blue;
  imageData.data[(i*4) + 3] = 255; // alpha  color
};
context.putImageData(imageData, 0, 0);

可以在x，y处用颜色绘制特定像素。或一种传统的方法。

您的输入数组按错误的顺序“展平”：它应该按行，但您的数组是按列

[{ x: 0, y: 0, color: { red: 33, green: 220, blue: 181 },
 { x: 1, y: 0, color: { red: 33, green: 220, blue: 231 },
 { x: 2, y: 0, color: { red: 33, green: 220, blue: 221 },
 ...

---

（假设y从上到下，x从左到右）

图像数据从

（0，0）

到

（1，0）

，您的代码从

（0，0）

到

（0，1）

。换句话说，行/列主顺序存在冲突

无论如何，根据您的性能需求，您可能会过度考虑这一点

我希望能够做到的是有一些方法：

drawPixel(x, y, color, canvas) { ... } 

drawPixel（x，y，颜色，画布）{…}

可以在x，y处用颜色绘制特定像素

为什么不直接填充单个像素

ctx.fillStyle = 'rgba(red, green, blue, alpha)';
ctx.fillRect(x, y, 1, 1);

如果填充了大约100个像素，则效率低下，您需要切换到图像数据。

如果您想保持数据结构不变，可以使用类似的方法，这应该可以：

var imageData = context.createImageData(width, height);
var numPixels = width*height;
var pixelCount = 0;
for (var i = 0; i < width; i++) {
    for (var j = 0; j < height; j++) {
        var wpixel = j * width * 4;
        wpixel += i * 4;
        console.log(wpixel);
        imageData.data[(wpixel)]     = tracedScene[pixelCount].red;
        imageData.data[(wpixel) + 1] = tracedScene[pixelCount].green;
        imageData.data[(wpixel) + 2] = tracedScene[pixelCount].blue;
        imageData.data[(wpixel) + 3] = 255; // alpha  color
        pixelCount++; // independent of i and j the way I wrote it
    }
}
context.putImageData(imageData, 0, 0);

var-imageData=context.createImageData（宽度、高度）；
var numPixels=宽度*高度；
var-pixelCount=0；
对于（变量i=0；i

---

演示：

你可以发布你如何使用

imageData

绘图和/或你希望在图像上显示什么吗？是的，我将发布我应该看到的图像。我用imageData位编辑了这篇文章。这是画布对象。考虑到它是一个宽*高的图像（其中宽度和高度大约为640x480，因此为307200像素），我想我可能需要图像数据。感谢您的帮助Simon。如果您不想重新排序数据，我将图像数据代码更改为按列大顺序工作。（补充回答）谢谢。我的跟踪代码更改了1行，但这可能对其他人有用。谢谢。这解决了我的问题。我以为画布是按行排列的，不是按列排列的。

var imageData = context.createImageData(width, height);
var numPixels = width*height;
var pixelCount = 0;
for (var i = 0; i < width; i++) {
    for (var j = 0; j < height; j++) {
        var wpixel = j * width * 4;
        wpixel += i * 4;
        console.log(wpixel);
        imageData.data[(wpixel)]     = tracedScene[pixelCount].red;
        imageData.data[(wpixel) + 1] = tracedScene[pixelCount].green;
        imageData.data[(wpixel) + 2] = tracedScene[pixelCount].blue;
        imageData.data[(wpixel) + 3] = 255; // alpha  color
        pixelCount++; // independent of i and j the way I wrote it
    }
}
context.putImageData(imageData, 0, 0);