Формула JS для Mix Blend Multiply [закрыто] ⇐ Javascript

[Anonymous]

Как работает CSS-режим Blend-Mudely для цветов с непрозрачностью (поиск функции JS MultiplyColor)? В первом абзаце использовался режим смеси CSS. На последнем использованном режиме смеси JS для тех же двух цветов. Полученные цвета разные (diffs opacty?, Запустите фрагмент ниже). < /P>

Код: Выделить всё

const span = document.querySelector('[id="result-color"]');
const tHighlight = {r: 255, g: 14, b: 188, a: 0.28};
const pHighlight = {r: 165, g: 218, b: 255, a: 0.698};
const multiplyColors = (c1, c2) => {
const r = Math.round((c1.r * c2.r) / 255);
const g = Math.round((c1.g * c2.g) / 255);
const b = Math.round((c1.b * c2.b) / 255);
const a = (c1.a * c2.a);

return `rgba(${r}, ${g}, ${b}, ${a})`;
};

window.console.log(span);
span.style.backgroundColor = multiplyColors(tHighlight, pHighlight);< /code>
.paragraph {
position: relative;
margin-bottom: 20px;
}

.textHighlighter {
background-color:rgba(255, 14, 188, 0.28);
}

.textHighlighter2 {
// background color
background-color:rgba(255, 14, 188, 0.28);
}

.paragraphHighlighter {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
background: rgba(165, 218, 255, 0.698);
mix-blend-mode: multiply; // required for text to be always black
}< /code>
Morbi eu scelerisque arcu. Sed ac magna ac nulla faucibus elementum vitae non nulla. Fusce pharetra porttitor ullamcorper. Curabitur consectetur viverra nisl. In id ipsum ac dui accumsan ultrices in a ante. Vivamus vel erat sed ligula facilisis elementum. Sed auctor erat tortor, non semper augue aliquet in. Nam ut facilisis felis, ut finibus ante. Aliquam erat volutpat. Nulla bibendum mi lacinia pellentesque sodales. Phasellus placerat libero vitae eros malesuada tempor.
Morbi tempus dui porttitor, blandit lacus eget, cursus nisi. In eleifend interdum orci quis imperdiet. Integer congue id tortor ut congue. Nunc rhoncus venenatis ligula, ac interdum purus dictum sed. Etiam nec diam tincidunt, mollis dolor a, tempus dui. Donec vestibulum sed nunc a condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce metus lectus, lacinia a cursus vel, posuere at lorem. Integer congue tortor ut libero pulvinar ornare. Nulla iaculis justo sed consectetur vulputate. Proin leo erat, blandit sed enim non, malesuada dignissim enim. Aliquam non imperdiet elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Вопрос № 1: Как действительно множество цветов браузера с непрозрачностью? bgspancolor для данного результата .Colorblendmodemultiple и bdhighlightparagraphcolor, чтобы пролет под выделенным Div выглядел как пролет с фоном (фон (

Код: Выделить всё

resultColorBlendModeMultiple = rgba(255, 14, 188, 0.28})

, bdhighlightparagraphcolor = rgba (165, 218, 255, 0,698 )
ps: найденный ответ для #1

Код: Выделить всё

const multiplyColors = (c1, c2) => {
const norm_r1 = c1.r / 255;
const norm_g1 = c1.g / 255;
const norm_b1 = c1.b / 255;
const norm_r2 = c2.r / 255;
const norm_g2 = c2.g / 255;
const norm_b2 = c2.b / 255;
const result = { r: 0, g: 0, b: 0, a: 0 };

// Calculate blended alpha
result.a = c1.a + c2.a * (1 - c1.a);

// Calculate blended RGB channels
// The multiply blend formula with alpha consideration
//
if (result.a === 0) {
// Avoid division by zero
return result;
}

result.r = (norm_r1 * c1.a * norm_r2 * c2.a + norm_r1 * c1.a * (1 - c2.a) + norm_r2 * c2.a * (1 - c1.a)) / result.a;
result.g = (norm_g1 * c1.a * norm_g2 * c2.a + norm_g1 * c1.a * (1 - c2.a) + norm_g2 * c2.a * (1 - c1.a)) / result.a;
result.b = (norm_b1 * c1.a * norm_b2 * c2.a + norm_b1 * c1.a * (1 - c2.a) + norm_b2 * c2.a * (1 - c1.a)) / result.a;

// Convert back to 0-255 range and round
result.r = Math.max(0, Math.min(255, Math.round(result.r * 255)));
result.g = Math.max(0, Math.min(255, Math.round(result.g * 255)));
result.b = Math.max(0, Math.min(255, Math.round(result.b * 255)));

return result;

};

Подробнее здесь: https://stackoverflow.com/questions/797 ... d-multiply