与HTML颜色和透明度在JavaScript

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。