2012-08-27 11 views
10

与えられたパラメータは2色のr、g、bです。javascriptで2つの色を掛ける方法は?

どのようにそれらを掛けることができますか?

COLOR1:0255255

カラー2:255,255,0

が掛け:0,255,0

example

+0

uが私たちにあなたが苦労データ構造の印象を与えるために私達にあなたのコードを表示してくださいその –

+0

のための行列の乗算を使用する必要があります。あるいは、乗算演算子 '*'を求めていますか? – Bergi

+0

私はこの効果の方法を知らない。 –

答えて

5

に基づきます単純な乗算式は、ここで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; 
}​ 

ここではあなたが一緒にプレイすることができます背景色を使用したバイオリンです:http://jsfiddle.net/unrLC/

enter image description here

+6

ちょうどaskin '...なぜ私は正式な宣言ですか? – Ross

+1

これはコーディングスタイルです。すべての変数はスコープの先頭で宣言されています。 ES6の 'const'と' let'の前には、関数にスコープされた変数、または初期化される前に変数を参照することが許されたグローバルな、ホイスト型の宣言しか持たず、同じ宣言を複数回行うことができます。全体的に、バグを導入する簡単な方法になります。これらの問題に対処するために、多くの人がスコープ内に表示されるすべての変数を関数の最初のステートメントとして宣言することに専念することを選択しました。 – Semicolon

3

例(Photoshopで乗算>モード - を混合するように)色成分を0と1の間の値に変換すると、単純な乗算になります。

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 
5

Here's the formula for multiplying colors(ならびに他のブレンドモード式):背面255の範囲0〜結果Thanslate。

式:あなたはJavaScriptで非常に簡単にこれを実装することができます色=(トップカラー)*(ボトムカラー)/ 255

を結果。

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

私は目的が0〜255の範囲色範囲を乗算の範囲にそれらを減少させることで推測[0、1]、それらを乗算し、それらを再度展開:

color_new = ((color_1/255) * (color_2/255)) * 255 
color_new = color_1 * color_2/255 
関連する問題