用HTML5 canvas上的drawImage調製顏色

我正在玩弄修改my game development IDE以生成使用它創建的遊戲的HTML5版本的想法。 IDE的一個特點是定義框架的能力，它不僅定義了圖形單元如何轉換（旋轉，拉伸等），還包括如何繪製圖形。所以如果我想要綠色的山丘和棕色的山丘以及山丘和山丘，我只需要爲所有這些定義一個圖形，簡單地轉換和着色就不同。用HTML5 canvas上的drawImage調製顏色

我可以看到HTML5 canvas上下文將如何讓我轉換drawImage結果，但我沒有看到調整顏色的實際方法。我希望能夠說，例如，R = 255，G = 255，B = 0，A = 127並且沒有任何藍色通道通過（50％半透明度繪製的圖形的黃色版本）（請記住圖形單元的某些部分可能已經是半透明或透明的）。

這可能嗎？或者我需要getImageData並操縱像素和緩存操縱的副本？如果我需要緩存操作副本，那麼完成此操作的最佳JavaScript數據結構是什麼？我想我會想要某種字典，其中的關鍵是圖像索引，而RGBA以某種方式組成單個值。查找將不得不非常快，因爲它可能會被繪製的大部分瓷磚完成。

來源

2011-10-16 BlueMonkMN

不幸的是，我認爲你沒有getImageData的幫助就可以做到。

這裏的着色用getImageData的圖像的一個例子：

http://jsfiddle.net/3eUBk/2/

這是我提出來回答這個問題，裏面什麼都有的解釋，多數民衆贊成回事：How can I use a gradient map to tone a HTML5 canvas with an image in the canvas.

讓我知道你是否需要更多信息。

來源

2011-10-16 15:49:29

你能幫我提供有關jscript中字典數據結構的信息，我可以用它來緩存彩色圖塊嗎？我承認我沒有看起來很難，所以解決方案可能很明顯。但將它與這個答案聯繫起來可能會很方便。我會開始看。 – BlueMonkMN

進一步思考它，我認爲我需要的是將框架集索引號映射到一組信息，包括圖形單元格編號和轉換參數。圖形單元應該與原始圖像一樣。但是它應該垂直延伸以緩存圖像的所有交替彩色版本，這些版本將在圖像加載後不久生成。所以我需要能夠擴大圖像並添加到它。 – BlueMonkMN

創建一個（大得多）內存中畫布以緩存所有這些內容以在稍後重繪時沒有任何問題。 –

用HTML5 canvas上的drawImage調製顏色

回答

相關問題