Przezroczystość + kolor po nazwie

Question

Nie mam konkretnej wiedzy z HTML i obocznościami, trochę czasem dłubnę jakieś małe "techniczne" stronki do monitorowania itp. Aktualnie bawię się zegarami (radial-gauge) i po pierwsze chciałem się spytać, czy ktoś też bawił się tym?

Głównym elementem w bibliotece jest rysowanie po canvas.

Drugie pytanie jest bardziej ogólne - kolory można zapodać w formie RGB ("#456" lub dokładniej "#402077"), można użyć funkcji rgba, gdzie można też podać przeźroczystość (kanal alfa). Można też używać nazw "blue", "white" itp. Czy można jakoś połączyć te dwie ostatnie metody i podać kolor po nazwie uzupełniając go transparentnością? Jakoś nie czuję kolorów podanych w RGB. Chodzi mi o specyfikowanie kolorów w ustawieniach atrybutu przy definicji/tworzeniu elementu

<canvas data-type="radial-gauge"
        ...
        data-highlights='[
                    {"from": -30, "to": -5, "color": "rgba(50,50, 255, .6)"},
                    {"from": -5,  "to": 10, "color": "rgba(200,200, 255, .6)"},
                    {"from": 10,  "to": 20, "color": "orange"},
                    {"from": 20,  "to": 50, "color": "rgba(250, 0, 0, .6)"}
                ]'
></canvas>

W powyższym kodzie chciałbym móc stosować nazwy (jak w trzecim wierszu) ale z podaniem przezroczystości.

Comments

Sprawdź to:  Getting the RGB values for a CSS/HTML named color in JavaScript

 

Można też spróbować zapisu hex z podaniem alfa: 

#00ff00  =>  rgb(0,255,0)
#00ff0050  =>  rgba(0,255,0,0.5)

<style>
  div div {
    display: inline-block;
    width: 200px;
    height: 200px;
  }
  div div:nth-child(1) {
    background-color: #00ff00;
  }
  div div:nth-child(2) {
    background-color: #00ff0080;
  }
  div div:nth-child(3) {
    background-color: #00ff0040;
  } 
</style>

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

 

Jakoś nie czuję kolorów podanych w RGB

podejrzewam, że zapis w hex, też nie przypadnie Tobie do gustu. 

Answer 1

Może taki trik w oparciu o Colors.js  

W trakcie ładowania kodu strony następuje zamiana.

 

<canvas data-type="radial-gauge" 
        data-highlights='[
                         {"from": -30, "to": -5, "color": "blue 99"},
                         {"from": -5,  "to": 10, "color": "magenta 60"},
                         {"from": 10,  "to": 20, "color": "orange"},
                         {"from": 20,  "to": 50, "color": "red 65"}]'
        >         
</canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Colors.js/1.2.4/colors.min.js"></script>
<script>
  function gaugeColorNameToRGBA() {
    const cv = document.querySelector('canvas[data-highlights]') || null;
    if (cv) {
      const highlights = JSON.parse(cv.dataset.highlights);
      for (const row_color of highlights) {
        let [rgb, alpha] = row_color.color.toLowerCase().split(' ');
        rgb = $c.name2rgb((rgb || 'black')).RGB.replaceAll(' ', ',');
        alpha = (parseInt((alpha || 100)) >= 100) ? 1 : parseInt((alpha || 99)) / 100;
        row_color.color = `rgba(${rgb},${alpha})`;
      }
      cv.dataset.highlights = JSON.stringify(highlights);
    }
  }

  gaugeColorNameToRGBA();  
</script>