在JavaScript中处理HTML颜色和透明度

Question

在JavaScript中处理HTML颜色和透明度

3

考虑这个：

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

在这个例子中，我们正在处理颜色组件和透明度。但是从JavaScript的角度来看，表达式的右侧是一个字符串。只是碰巧当我们稍后将此字符串分配给{{link1：canvas context fillStyle}}时，它知道如何解释CSS颜色值。

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

在JavaScript中，我们当然可以将字符串解析为单独的组件，将它们转换为具有数值属性的对象，对这些对象进行操作，然后将对象转换回CSS颜色字符串。这听起来很费力。

由于我没有太多的JavaScript实践经验，我不知道使JavaScript / TypeScript中的颜色处理更容易的常见习惯用法和模式。

那就是我想知道的。假设我想将timeSeries.options.fillStyle的不透明度增加0.1。最简单的方法是什么？

- Andrew Savinykh

听起来你想要类似于TinyColor的东西。 - André Dion

@AndréDion 看起来不错，你想把这个评论变成一个答案吗？ - Andrew Savinykh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- André Dion · Accepted Answer

在JavaScript中，我们当然可以将字符串解析为单独的组件，将它们转换为具有数字属性的对象，使用这些对象，然后将对象再转换回CSS颜色字符串。这听起来很麻烦。这并不是JavaScript的限制，而是Web API处理颜色的方式。有不同的表示颜色的方法（十六进制、RGB、HSL），但最终都被实现为DOMString。如果您想单独调整颜色的属性，您唯一的选择就是按照您所述的方式进行序列化和反序列化对象。幸运的是，已经有一些库为您提供了这种行为，例如TinyColor。