Javascript 在HTML5画布上使用drawImage调节颜色

我一直在考虑修改它来制作HTML5版本的游戏。IDE的一个特性是能够定义框架，框架不仅定义了图形单元的变换方式（旋转、拉伸等），还定义了绘制时的颜色。所以，如果我想要绿色山丘、棕色山丘、上坡和下坡，我只需要为所有这些定义一个图形，简单地进行变换并以不同的颜色进行着色

我可以看到HTML5画布上下文将如何允许我转换drawImage结果，但我没有看到一种调整颜色的实用方法。例如，我希望能够说，R=255，G=255，B=0，A=127，并且没有蓝色通道（图形的黄色版本）以50%的透明度绘制（请记住，图形单元的部分可能已经是半透明或透明的）

---

这可能吗？或者我需要

getImageData

并处理像素和缓存处理过的副本吗？如果我需要缓存被操纵的副本，那么实现这一点的最佳JavaScript数据结构是什么？我想我需要某种字典，其中键是一个图像索引和一个RGBA，以某种方式组成一个值。查找速度必须非常快，因为它可能会对正在绘制的大多数瓷砖进行查找。

遗憾的是，如果没有

getImageData

的帮助，我认为您无法进行查找

下面是一个使用

getImageData

着色图像的示例：

这是我为了回答这个问题而做的，这个问题解释了正在发生的一切：

---

如果您需要更多信息，请告诉我。

您是否可以帮助我了解jscript中的字典数据结构信息，我可以使用它来缓存着色的分幅？我承认我没有认真研究，所以解决办法可能是显而易见的。但是把它和这个答案联系起来可能很方便。我也会开始寻找。进一步考虑，我认为我需要的是一个类，它将框架集索引编号映射到一组信息，包括图形单元编号和转换参数。图形单元格应与原始单元格位于同一画布上。但它应该垂直扩展，以缓存图像的所有交替颜色版本，这些版本将在加载图像后不久生成。因此，我需要能够扩展图像并将其添加到其中。创建一个（更大的）内存画布来缓存所有这些图像，以便在以后重新绘制，这没有什么错。我缺少一些真正基本的东西。创建内存画布最简单的方法是什么？如果我在画布上绘制，然后将其用作绘制另一画布的源，它会保留其alpha通道，还是会获得白色背景？看起来像document.createElement是创建内存画布的方法，但哇，很难找到真正的代码示例。我原以为找到真正的代码会更容易。