来自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);    
    } 
} 

然后绘制背景...

（编辑：改变RECT到fillRect按照坊间的言论）