与えられたパラメータは2色のr、g、bです。
どうすればそれらを掛けることができますか?(ブレンディングモードのように-> Photoshopで乗算)
例:
色1:0,255,255
color2:255,255,0
乗算:0,255,0
与えられたパラメータは2色のr、g、bです。
どうすればそれらを掛けることができますか?(ブレンディングモードのように-> Photoshopで乗算)
例:
色1:0,255,255
color2:255,255,0
乗算:0,255,0
単純な乗算式に基づいて、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/
これが、色を乗算するための式(および他のブレンドモードの式)です。
式:結果の色=(上の色)*(下の色)/ 255
これはJavaScriptで非常に簡単に実装できます。
var newRed = red1 * red2 / 255;
var newGreen = green1 * green2 / 255;
var newBlue = blue1 * blue2 / 255;
色成分を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
目的は、0から255までの色の範囲を乗算することだと思います。それらを[0、1]の範囲に減らし、乗算して、もう一度展開します。
color_new = ( (color_1 / 255) * (color_2 / 255) ) * 255
color_new = color_1 * color_2 / 255