如何在javascript中乘以兩種顏色？

Question

給定的參數是兩種顏色的r，g，b。

我怎樣才能將它們相乘？ （像混合模式 - >在Photoshop中相乘）

例：

顏色1：0,255,255

COLOR2：255,255,0

乘：0,255,0

Answer 1

基於簡單的乘法公式，這里是一個適用於RGB的javascript函數：

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

使用現代JavaScript：

const multiply = (rgb1, rgb2) => rgb1.map((c, i) => Math.floor(c * rgb2[i] / 255))

這是一個使用你可以玩的背景顏色的小提琴： http ： //jsfiddle.net/unrLC/

Answer 2

這是乘法顏色的公式 （以及其他混合模式公式）。

公式：結果顏色=（頂部顏色）*（底部顏色）/ 255

您可以在JavaScript中輕松實現此功能。

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

Answer 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

Answer 4

我想目標是將顏色范圍從0增加到255.將它們減小到[0,1]的范圍，將它們相乘，然后再次展開它們：

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