與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。