来自rgb值的HTML画布图像

Question

我有三个12x12阵列，每个阵列都有R，G和B值。我如何使用HTML Canvas输出图像（12x12）？我已经看过Canvas演示，它们展示了画线和诸如此类的东西，但没有提供一些RGB阵列来制作东西。

非常感谢任何指导。

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