画布上的 CSS 饱和过滤器答案

【问题标题】：CSS Saturate Filter on Canvas画布上的 CSS 饱和过滤器
【发布时间】：2015-04-28 20:55:42
【问题描述】：

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

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

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

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

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

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

我希望最终得到像 hsl(0, 50%, 67%) 这样的东西，但无论我使用什么值，过滤器似乎根本不会改变颜色。

有什么想法吗？

【问题讨论】：

如果你将 #aaa 更改为它对应的 hsl 值 hsl(0, 11.1%, 70%) 它确实会改变...
#aaa是灰色阴影，表示其hsl值没有饱和度。

标签： css canvas css-filters

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

从 CSS 样式中选择颜色怎么样？

canvas {
  color: red;
}


function init() {
  let canvas = document.getElementById('test'),
      context = canvas.getContext('2d');

  let style = window.getComputedStyle (canvas);
  let color = style.color;
  canvas.width = 300;
  canvas.height = 300;

  let x = canvas.width / 2,
      y = canvas.height / 2;

  context.beginPath( );
  context.arc(x, y, 100, 0, 2 * Math.PI, false);
  context.strokeStyle = color;
  context.lineWidth = 20;
  context.stroke();

  context.globalAlpha = 0.85;
  context.beginPath();
  context.arc(x, y, 100, 0, Math.PI + 0.3, false);
  context.strokeStyle = '#eee';
  context.stroke();

}

demo

【讨论】：