javascript - 使用 HTML5/CSS/JS 更改图像的颜色？

Question

有没有一种方法可以像在 Flash/ActionScript 中那样仅使用 HTML5/CSS/JavaScript 来更改图像的颜色？

这是一个 Flash 示例:http://www.kirupa.com/developer/actionscript/color.htm

据我所知，我的猜测是只有使用 Canvas 才有可能；但我想知道是否有另一种解决方案也支持 IE7 和 IE8，而无需为 IE 安装谷歌插件。

Answer 1

这取决于您要做什么。

如果您只想用一种颜色覆盖图像，那么您可以在顶部放置一个 DIV，它具有所需颜色的部分透明 PNG 作为其背景图像。这是一个 JS Fiddle 演示:

http://jsfiddle.net/btCfK/

我手头没有 IE 7 的副本可以检查，但我很确定它可以在旧的 IE 中工作(无论如何晚于 6)。

此示例对叠加层和图像都使用固定大小。通过一些聪明的编码，您可以改变它，并制作一个基于 JavaScript 的控件来交换颜色进出。

如果您想要比这更复杂的东西，如果不使用 Canvas 元素、SVG 或一大堆 JavaScript，这可能是不切实际的。