Question

我有一个画布，目前正在绘制灰度图（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

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

Answer 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

CSS Saturate Filter on Canvas

2 个答案: