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

毕竟使用画布结束了。删除图像的想法，然后使用canvas绘制圆圈（和jCanvas使其与jQuery环境模块化）。基本上将<canvas>标记本身视为<img>等价物，并且可以根据需要动态创建它们。

为了让它能够使用IE9之前的浏览器（HTML5支持不存在），有一个名为ExplorerCanvas的漂亮的lib，它将画布功能带到IE9之前的浏览器中（它肯定适用于至少在IE9上IE7怪癖模式）。

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

还有dealing with dynamic <canvas> elements with ExplorerCanvas的问题，但这应该很容易解决。

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

3 个答案: