來自rgb值的HTML畫布圖像

我有三個12x12陣列，每個陣列都有R，G和B值。我將如何去使用HTML Canvas輸出圖像（12x12）？我遇到了Canvas演示，顯示了繪製線條和什麼，但沒有像提供一些RGB數組產生的東西。來自rgb值的HTML畫布圖像

任何指導非常感謝。

2014-06-10 intl

可以使用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按照坊間的言論）

來源

2014-06-10 09:19:47

+1你接近，但你在設置fillStyle後需要填充每個矩形。如果您使用ctx.fillRect而不是ctx.rect，那麼您的解決方案應該可以工作。或者，在循環內部執行ctx.beginPath，ctx.fillStyle，ctx.rect，ctx.fill。 – markE

另一方面，是否可以將圖像保存爲jpg或png或其他格式？ – intl

使用http://www.nihilogic.dk/labs/canvas2image/進行保存。謝謝您的幫助。 – intl

來自rgb值的HTML畫布圖像

回答

相關問題