我有一些带有透明背景的 png 矢量，我想动态地为它们叠加颜色，这样用户就可以选择一个矢量，然后从选择器中选择他们想要的颜色。
唯一的规定是它们不能用背景颜色遮盖，因为多个 png 将加载到同一 Canvas 上并且需要重叠。
我到底如何将图像加载到 Canvas 中，然后用某种颜色覆盖它？
编辑:我找到了一些信息here和 here (- Nathan 回答)哪种工作，但并非在所有浏览器中都有效。
第二个尤其是因为我只需要覆盖 png 本身，并且透明度保持透明
最佳答案
实际上，您希望将图像加载到 Canvas 中并用某种颜色覆盖它，这将为整个图像带来颜色效果。
这个 jQuery 插件正是这样做的，它将图像加载到 Canvas 中，操纵颜色提供漂亮的着色效果并将其转换回图像元素。将其转换回图像元素是一个非常重要的部分，因为某些用户可能会基于 img 元素而不是 ID 或类来设置其 CSS 样式。
只需玩互动 demo :
并浏览 docs :
玩得开心。
关于javascript - HTML5/JS 中的图像颜色叠加，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4281328/