问题描述
我正在考虑修改 我的游戏开发 IDE 以生成所创建游戏的 HTML5 版本用它.IDE 的功能之一是定义帧的能力，它不仅定义了图形单元的转换方式(旋转、拉伸等)，还定义了绘制时的着色方式.因此，如果我想要绿色的山丘和棕色的山丘以及上坡和下坡，我只需要为所有这些定义的 1 个图形，简单地转换和着色不同.
I'm playing around with the idea of modifying my game development IDE to produce HTML5 versions of the games created with it. One of the features of the IDE is the ability to define frames, which not only define how a graphics cell is transformed (rotated, stretched, etc), but also how it is colored when it is drawn. So if I wanted green hills and brown hills and uphills and downhills, I would only need 1 graphic defined for all of those, simply transformed and colored differently.
我可以看到 HTML5 画布上下文如何允许我转换 drawImage 结果，但我没有看到调整颜色的实用方法.我想说，例如，R=255, G=255, B=0, A=127 并且没有任何蓝色通道通过(图形的黄色版本)以 50% 半透明度绘制(请记住，图形单元格的某些部分可能已经是半透明或透明的).
I can see how an HTML5 canvas context will allow me to transform drawImage results, but I don't see a practical way to modulate the colors. I want to be able to say, for example, R=255, G=255, B=0, A=127 and have none of the blue channel come through (a yellow-tinted version of the graphic) drawn at 50% translucency (keeping in mind that portions of the graphic cell may already be translucent or transparent).
这可能吗?还是我需要 getImageData 并操作像素并缓存操作的副本?如果我需要缓存被操纵的副本，那么最好的 JavaScript 数据结构是什么?我想我想要某种字典，其中键是图像索引和以某种方式组合为单个值的 RGBA.查找必须非常快，因为它可能会为大多数正在绘制的图块完成.
Is this possible? Or will I need to getImageData and manipulate the pixels and cache manipulated copies? If I need to cache manipulated copies, what's the best JavaScript data structure to accomplish this? I think I'd want some kind of dictionary where the key is an image index and an RGBA composed as a single value somehow. Look-ups would have to be very fast because it would potentially be done for a majority of the tiles being drawn.
推荐答案
很遗憾，如果没有 getImageData 的帮助，我认为你做不到.
Sadly I don't think you can do it without the help of getImageData.
这是一个使用 getImageData 为图像着色的示例:
Here's an example of tinting an image using getImageData:
这是我为回答这个问题而做的，它解释了正在发生的一切:如何使用渐变映射来调整 HTML5 画布，并在画布中添加图像.
It was something I made to answer this question, which has an explanation of everything thats going on: How can I use a gradient map to tone a HTML5 canvas with an image in the canvas.
如果您需要更多信息，请告诉我.
Let me know if you need more information.
这篇关于在 HTML5 画布上使用 drawImage 调制颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！