deference "screen" 和 "lighter" 之间的区别是什么？

Question

lighter Where both shapes overlap the color is determined by adding color values. mdn

screen: The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply). mdn

结果是一样的

它们有什么不同？

Answer 1

算法不一样：lighter & screen。

结果也不一样：

const canvas = document.querySelector( "canvas" );
const w = canvas.width = 500;
const h = canvas.height = 100;
const ctx = canvas.getContext( "2d" );
// a vertical gradient black (top) to white (bottom)
const grad1 = ctx.createLinearGradient( 0, 0, 0, h );
grad1.addColorStop( 0, "black" );
grad1.addColorStop( 1, "white");
ctx.fillStyle = grad1;
ctx.fillRect( 0, 0, w, h );
// two horizontal rainbows
const grad2 = ctx.createLinearGradient( 0, 0, w/2, 0);
const d = 1/360;
for(let i = 0; i<360; i++ ) {
  grad2.addColorStop( i*d, `hsl(${ i }deg,50%,50%)` );
}
// first with "screen" mode on the left
ctx.fillStyle = grad2;
ctx.globalCompositeOperation = "screen";
ctx.fillRect( 0, 0, w/2, h );
// second with "lighter" mode on the right
ctx.globalCompositeOperation = "lighter";
ctx.translate( w/2, 0 );
ctx.fillRect( 0, 0, w/2, h );

<canvas></canvas><br>
left: screen<br>
right: lighter<br>

但是，是的，阴影越深，差异就越不明显。