在 JavaScript 中使用 HTML 颜色和透明度

Question

考虑一下：

timeSeries.options.fillStyle = 'rgba(0, 255, 0, 0.2)';

在本例中，我们使用颜色分量和透明度。然而，从 javascript 的角度来看，表达式的右侧是一个字符串。碰巧的是，当我们稍后将此字符串分配给 canvas context fillStyle 时，它知道如何解释 css 颜色值。

但是假设我们的程序需要使用颜色。比如说，改变颜色 rgb 组件或不透明度。

在 javascript 中，我们当然可以将字符串解析为单个组件，将它们转换为具有数字属性的对象，使用这些属性，然后将对象转换回 css 颜色字符串。这听起来工作量很大。

由于我没有大量的 javascript 实践经验，所以我不知道在 javascript/typescript 中使用颜色更容易的常见习语和模式是什么。

这就是我想知道的。假设我想将timeSeries.options.fillStyle 的不透明度提高 0.1。实现这一目标的最简单方法是什么？

Answer 1

在 javascript 中，我们当然可以将字符串解析为单个组件，将它们转换为具有数字属性的对象，使用这些属性，然后将对象转换回 css 颜色字符串。这听起来工作量很大。

这并不是 JavaScript 本身的限制，它只是 Web API 处理颜色的方式。有不同的方式来表示颜色（十六进制、rgb、hsl），但最终它们都被实现为DOMString。如果您想单独调整颜色的属性，您唯一的选择就是完全按照您的概述进行操作：序列化和反序列化对象。

幸运的是，已经有一些库已经为您提供了这种行为，例如 TinyColor。