Canvas 上的 CSS 饱和过滤器

Question

我有一个 Canvas ，目前正在绘制灰度图 ( JSBin example )。

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

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

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

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

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

我希望最终得到类似 hsl(0, 50%, 67%) 的东西，但相反，过滤器似乎根本不会改变颜色，无论我的值是多少使用。

有什么想法吗？

Answer 1

事实证明，如果您最初绘制具有一定饱和度的仪表，则可以使用 hue-rotate 滤镜，然后您可以降低它们的饱和度以再次获得灰度。

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

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