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

Working with HTML colours and transparencies in JavaScript

本文关键字：透明度 颜色 HTML JavaScript 中的 使用      更新时间：2023-09-26

考虑一下：

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

在这个例子中，我们使用的是颜色成分和透明度。然而，从javascript的角度来看，表达式的右侧是一个字符串。这样的话，当我们稍后将这个字符串分配给画布上下文fillStyle时，它知道如何解释css颜色值。

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

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

由于我在javascript方面没有太多的实践经验，我不知道哪些常见的习惯用法和模式使在javascript/typescript中使用颜色更容易。

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

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

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

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

相关文章：