css - Canvas 上的CSS饱和过滤器

我有一个画布，当前正在绘制灰度图（JSBin example）。

它实际上是一个径向进度表，将在应用程序中大量使用。但是，与其使用Javascript为它着色，不如希望它能够基于类为它着色。

我认为这将是CSS过滤器的理想用例。我将用灰色绘制默认的进度表，然后使用CSS滤镜添加饱和度并进行色相旋转，以实现蓝色，橙色和绿色。

canvas {
  -webkit-filter: saturate(8);
}

该规则在Chrome中受支持且有效，但是问题是，它似乎根本没有改变饱和度。

我在想#aaa会转换为HSL对应的hsl(0, 0%, 67%)。然后，当我使用滤镜增加饱和度时，它应该变得更饱和，但色调相同。

我希望以hsl(0, 50%, 67%)结尾，但是无论我使用什么值，滤镜似乎都不会改变颜色。

有任何想法吗？

最佳答案

事实证明，如果最初用一些饱和度绘制仪表，则可以使用hue-rotate滤镜，然后可以对其进行去饱和以再次获得灰度。

http://jsbin.com/qohokivobo/2/edit?html,css,output

从概念上讲，这不是答案。但是与此同时，这是一个解决方案。

关于css - Canvas 上的CSS饱和过滤器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29929764/