Как умножить два цвета в javascript?

Ответ 1

Основываясь на простой формуле умножения, вот функция javascript, которая должна работать для RGB:

function multiply(rgb1, rgb2) {
    var result = [],
        i = 0;
    for( ; i < rgb1.length; i++ ) {
        ​result.push(Math.floor(rgb1[i] * rgb2[i] / 255));
    }
    return result;
}​

Вот скрипка с использованием цветов фона, с которыми вы можете играть: http://jsfiddle.net/unrLC/

Ответ 2

Здесь формула для умножения цветов (а также другие формулы режима смешивания).

Формула: Результат Цвет = (Верхний цвет) * (Нижний цвет)/255

Вы можете реализовать это очень легко в JavaScript.

var newRed = red1 * red2 / 255;
var newGreen = green1 * green2 / 255;
var newBlue = blue1 * blue2 / 255;

Ответ 3

Вы переводите цветовые компоненты в значение от 0 до 1, а затем простое умножение. Перетащите результат обратно в диапазон от 0 до 255:

0, 255, 255  ->  0, 1, 1
255, 255, 0  ->  1, 1, 0

0*1 = 0, 1*1 = 1, 1*0 = 0

0, 1, 0  ->  0, 255, 0

Ответ 4

Я предполагаю, что цель состоит в том, чтобы умножить диапазоны цветов от 0 до 255. Уменьшите их до диапазона [0, 1], умножьте их и снова разверните:

color_new = ( (color_1 / 255) * (color_2 / 255) ) * 255
color_new = color_1 * color_2 / 255