使用 jQuery 更改平面图像的颜色

Question

我有一个平坦的白色圆形图像（如非常平坦的 #ffffff 图像）。有没有办法可以在 HTML 页面的上下文中更改它的颜色（假设是 PNG，所以我们正在使用 RGBA 栅格）？

我的环境使用 jQuery，因此我倾向于以 jQuery 的思维方式进行思考，但如果有其他方法使这成为可能，我也想听听。

我不太熟悉 Canvas 的功能，但也许它可以做这样的事情。然而，就浏览器支持而言，如果该解决方案能够与 IE6 接触，我将非常感激（是的，我知道它已经死了，但请耐心等待）。

Answer 1

您是否考虑过使用画布并在图像下方绘制圆圈，然后更改其颜色？遵循其他答案，使图像透明，然后将其分层在画布上。

http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

Answer 2

您可以在支持边框半径的浏览器中“模拟”圆形。尝试;

<div class="circle"/>

.circle{
    background:blue;
    border: 1px solid red;
    border-radius: 50px 50px 50px 50px;
    height: 100px;
    width: 100px;
}

然后相应地更改背景颜色。

是的，我知道，不支持 IE6，但也许你可以依靠上面提到的透明图像效果

Answer 3

最终还是使用了画布。废弃图像想法，然后使用画布绘制圆圈（和 jCanvas 使其与jQuery 环境）。基本上将 标签本身视为 等效项，并且可能根据需要动态创建它们。

为了让它与 IE9 之前的浏览器（不支持 HTML5）一起工作，有一个漂亮的库，名为 ExplorerCanvas 为 IE9 之前的浏览器带来了画布功能（它至少可以与 IE9 上的 IE7 怪异模式配合使用）。

如果您要在 ExplorerCanvas 上执行画布动画，预计性能会下降，但由于这只是 2D 静态，因此应该不会有太大问题。

还有处理动态的问题元素与 ExplorerCanvas，但这应该很容易修复。