• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed część wspólna kolorów - wzór

Aruba Cloud - Virtual Private Server VPS
0 głosów
194 wizyt
pytanie zadane 31 października 2021 w HTML i CSS przez TOWaD Mądrala (6,420 p.)
przywrócone 31 października 2021 przez TOWaD
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';

https://developer.mozilla.org/pl/docs/Web/API/Canvas_API/Tutorial/Basic_usage

Czy jest jakiś sposób (wzór) na określenie koloru w miejscu nakładania się tych dwóch powyższych (kolorów/prostokątów), czy trzeba to robić na około, i nakładać kolory oddzielnie (dodatkowe elementy rysunkowe).

edit: ewentualnie ustalenie po współrzędnej po stronie klienta.  //to już znalazłem

 

 

komentarz zamknięcia: chyba mam, ale to za dużo kobinacji, szybciej nałołożyć na siebie kształy
komentarz 31 października 2021 przez VBService Ekspert (256,600 p.)
edycja 31 października 2021 przez VBService

A może w css za pomocą linear-gradient (i zmiennych css)

div {
  --blend-amount: 50%;
  --base-color: red;
  --blend-color: blue;
  --stretch-factor: 100;
  background: linear-gradient(
    var(--base-color)  calc((  0% - var(--blend-amount)) * var(--stretch-factor)), 
    var(--blend-color) calc((100% - var(--blend-amount)) * var(--stretch-factor))
  );
}

 

no i może css color-mix() zmieni swój status z experimental na fully support.  wink

 

przykład

<div></div>
<input type="color" id="base-color">
<input type="color" id="blend-color">
div {
  width: 95px;
  height: 95px;
  margin-bottom: 0.5em;

  --blend-amount: 50%;
  --base-color: transparent;
  --blend-color: transparent;
  --stretch-factor: 100;
  background: linear-gradient(
    var(--base-color)  calc((  0% - var(--blend-amount)) * var(--stretch-factor)), 
    var(--blend-color) calc((100% - var(--blend-amount)) * var(--stretch-factor))
  );


  border-width: 5px;
  border-style: solid;
  border-radius: 50%;
  border-top-color: var(--base-color);
  border-left-color: var(--base-color);
  border-right-color: var(--blend-color);
  border-bottom-color: var(--blend-color);
  transform: rotate(45deg);
}
var button_base_color, button_blend_color, div;
window.onload = initialize;

function initialize() {
  div = document.querySelector('div');
   button_base_color = document.querySelector('#base-color');
  button_blend_color = document.querySelector('#blend-color');
   button_base_color.addEventListener('input', mixColors);
  button_blend_color.addEventListener('input', mixColors);

   button_base_color.value = '#ff0000'; // red
  button_blend_color.value = '#0000ff'; // blue
  
  mixColors();
}

function mixColors() {
  const color1 = button_base_color.value,
        color2 = button_blend_color.value;
  
  div.style.setProperty('--base-color', color1);
  div.style.setProperty('--blend-color', color2);
}

 

1
komentarz 3 listopada 2021 przez TOWaD Mądrala (6,420 p.)

Dzięki @VBService na ciebie zawsze można liczyć.

{
                        ctx.beginPath();
                        ctx.fillStyle = colorbackground;
                        ctx.arc(leftstart + 2 * skala, height * 0.7, height * 0.07, 0, Math.PI * 2, false);
                        if (boolright) ctx.fill();
                        else ctx.stroke();
                        ctx.fillStyle = color2;
                        ctx.arc(leftstart + 2 * skala, height * 0.7, height * 0.07, 0, Math.PI * 2, false);
                        if (boolright) ctx.fill();
                        else ctx.stroke();
                        ctx.closePath();
                    }

krótszy kod, canvas, coś nie do końca z css współpracuje

Podobne pytania

0 głosów
1 odpowiedź 3,769 wizyt
pytanie zadane 22 lutego 2016 w JavaScript przez Adam Jakś Dyskutant (8,940 p.)
0 głosów
2 odpowiedzi 612 wizyt
pytanie zadane 25 marca 2018 w HTML i CSS przez SZYMII Użytkownik (510 p.)
0 głosów
1 odpowiedź 165 wizyt
pytanie zadane 22 czerwca 2017 w HTML i CSS przez Marchiew Dyskutant (7,730 p.)

93,331 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,667 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...