search

Home  >  Q&A  >  body text

javascript - 如何实现多个颜色叠加效果?

如何给参数定义两个颜色?又如何让他们相互叠加(如同在PS里的混合层叠)。例如:
color1:0,255,255
color2:255,255,0
multiplied:0,255,0

原问题:How to multiply two colors in javascript?

阿神阿神2896 days ago584

reply all(1)I'll reply

  • 高洛峰

    高洛峰2017-04-10 13:13:10

    David:基于一个非常简单的叠加公式即可实现,如下所示,这是一个JavaScript针对RGB的代码,Demo:http://jsfiddle.net/unrLC/

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


    Samuel:这里是颜色叠加公式,还包含其他混合模式的公式,地址:http://en.wikipedia.org/wiki/Blend_modes#Multiply

    Formula: Result Color = (Top Color) * (Bottom Color) /255
    

    你可以在JavaScript中轻松的实现:

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

    reply
    0
  • Cancelreply