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

Question

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

 

 

Comments

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.  

 

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);
}

 

---

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