如何在javascript中将两种颜色相乘？答案

【问题标题】：How to multiply two colors in javascript?如何在javascript中将两种颜色相乘？
【发布时间】：2012-08-22 00:48:02
【问题描述】：

给定的参数是两种颜色的 r,g,b。

如何将它们相乘？（就像混合模式->在 Photoshop 中相乘）

例子：

颜色1：0,255,255

颜色2:255,255,0

相乘：0,255,0

【问题讨论】：

你必须使用矩阵乘法
请向我们展示您的代码，让我们对您遇到的数据结构有一个印象。或者你问的是乘法运算符*？
不知道这个效果的方法。

标签： javascript colors html5-canvas

【解决方案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/

【讨论】：

只是问问...为什么i的非正统声明？
这是一种编码风格——所有变量都声明在作用域的头部。在 ES6 const 和 let 之前，您只能拥有作用域为函数或全局的变量，提升声明允许在初始化之前引用变量，并且可以多次进行相同的声明。总而言之，这增加了一种引入错误的简单方法。为了解决这些问题，许多人选择限制自己将所有出现在作用域中的变量声明为函数中的第一个语句。

【解决方案2】：

Here's the formula for multiplying colors（以及其他混合模式公式）。

公式：结果颜色 =（顶部颜色）*（底部颜色）/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

【讨论】：