来自 rgb 值的 HTML 画布图像答案

【问题标题】：HTML canvas image from rgb values来自 rgb 值的 HTML 画布图像
【发布时间】：2026-01-23 17:05:01
【问题描述】：

我有三个 12x12 数组，每个数组都有 R、G 和 B 值。我将如何使用 HTML Canvas 输出图像（12x12）？我遇到过显示画线之类的 Canvas 演示，但没有什么比提供一些 RGB 数组来生成某些东西更好的了。

非常感谢任何指导。

【问题讨论】：

标签： javascript html image canvas rgb

【解决方案1】：

您可以使用fillRect 方法，此处描述：http://www.w3schools.com/tags/canvas_fillrect.asp

每个矩形将匹配一个表格单元格。您必须决定每个矩形有多大：一个像素高和一个像素宽，或者更多。假设我们将此值称为pixelSize。

您创建画布，获取上下文，定义 maxRows 和 maxColumns（这里都是 12）。然后你用两个嵌套循环迭代：

for(row=0; row<maxRows; ++row) {
    for(column=0; row<maxColumns; ++column) {
        ctx.fillStyle = 'rgb(' + rTable[row][column] + ',' + gTable[row][column] + 
                           ',' + bTable[row][column] + ')';
        ctx.fillRect(column*pixelSize,
                 row*pixelSize,
                 pixelSize,
                 pixelSize);            
    }
}

然后绘制上下文...

（已编辑：根据markE的评论将rect更改为fillRect）

【讨论】：

+1 你已经接近了，但你需要在设置填充样式后填充每个矩形。如果您使用 ctx.fillRect 而不是 ctx.rect 那么您的解决方案应该可以工作。或者，在循环内执行 ctx.beginPath、ctx.fillStyle、ctx.rect、ctx.fill。
在侧面，是否可以将图像保存为jpg或png或任何其他格式？
使用nihilogic.dk/labs/canvas2image 进行保存。感谢您的帮助。
谢谢马克E。如您所见，不太习惯于画布艺术。 :)