如果我有 2 个画布在彼此之上，是否可以实现 html 画布复合操作“更轻”？

Question

我想在绿色画布上显示白色到透明的渐变。我不希望渐变变暗，所以我使用“较轻”的复合操作。这完美地工作。第一个渐变是我想要的。它逐渐从白色变为背景，第二个渐变使用 source-over 并且从白色变为深色。那不是我想要的。

var ac = a.getContext('2d');

// green background

ac.fillStyle = 'green';

ac.fillRect(0, 0, 100, 100);

// white-to-transparent gradient but lighter CO

var g = ac.createLinearGradient(20, 0, 80, 0);

g.addColorStop(0, 'white');

g.addColorStop(1, 'transparent');

ac.fillStyle = g;

ac.globalCompositeOperation = 'lighter';

ac.fillRect(20, 20, 60, 10);

// white-to-transparent gradient

ac.globalCompositeOperation = 'source-over';

ac.fillRect(20, 40, 60, 10);

<canvas id="a" width=100 height=100></canvas>

因为在实际代码中我使用复杂的合成，并且出于性能原因，我决定将它分成两个画布。背景画布为绿色，渐变显示在顶部。问题是“打火机”现在不起作用。是否有可能达到与前一种情况相同的结果？

var bc = b1.getContext('2d');

// green background

bc.fillStyle = 'green';

bc.fillRect(0, 0, 100, 100);

var bc = b2.getContext('2d');

// white-to-transparent gradient but lighter CO

var g = bc.createLinearGradient(20, 0, 80, 0);

g.addColorStop(0, 'white');

g.addColorStop(1, 'transparent');

bc.fillStyle = g;

bc.globalCompositeOperation = 'lighter';

bc.fillRect(20, 20, 60, 10);

// white-to-transparent gradient

bc.globalCompositeOperation = 'source-over';

bc.fillRect(20, 40, 60, 10);

// white-to-#ffffff00 gradient source-over

var g = bc.createLinearGradient(20, 0, 80, 0);

g.addColorStop(0, 'white');

g.addColorStop(1, '#ffffff00');

bc.globalCompositeOperation = 'source-over';

bc.fillRect(20, 60, 60, 10);

// white-to-#00000000 gradient source-over

var g = bc.createLinearGradient(20, 0, 80, 0);

g.addColorStop(0, 'white');

g.addColorStop(1, '#00000000');

bc.globalCompositeOperation = 'source-over';

bc.fillRect(20, 80, 60, 10);

<div>

  <canvas id="b1" width=100 height=100 style="position: fixed; left: 0; top: 0;"></canvas>  

  <canvas id="b2" width=100 height=100 style="position: fixed; left: 5px; top: 5px; border: 1px solid red;"></canvas>

</div>

如您所见，没有一种组合可以达到相同的结果。我不能使用白色到绿色的渐变，因为在真实的代码背景中不仅仅是绿色。在这些演示中，我使用绿色来演示它。那么这甚至可能吗？如何达到同样的效果？

Answer 1

画布合成操作仅适用于源画布，并且仅在绘制时起作用。如果你想在两个画布元素之间应用效果，你需要求助于普通的 CSS，比如mix-blend-mode（虽然不一样）如果你想避免重新绘制整个背景，你可以有一个单独的（可能是屏幕外的）画布，并将其复制到你的最终图像drawImagevar bc1 = b1.getContext('2d');// green backgroundbc1.fillStyle = 'green';bc1.fillRect(0, 0, 100, 100);var bc2 = b2.getContext('2d');bc2.drawImage(b1, 0, 0);// white-to-transparent gradient but lighter COvar g = bc2.createLinearGradient(20, 0, 80, 0);g.addColorStop(0, 'white');g.addColorStop(1, 'transparent');bc2.fillStyle = g;bc2.globalCompositeOperation = 'lighter';bc2.fillRect(20, 20, 60, 10);// white-to-transparent gradientbc2.globalCompositeOperation = 'source-over';bc2.fillRect(20, 40, 60, 10);// white-to-#ffffff00 gradient source-overvar g = bc2.createLinearGradient(20, 0, 80, 0);g.addColorStop(0, 'white');g.addColorStop(1, '#ffffff00');bc2.globalCompositeOperation = 'source-over';bc2.fillRect(20, 60, 60, 10);// white-to-#00000000 gradient source-overvar g = bc2.createLinearGradient(20, 0, 80, 0);g.addColorStop(0, 'white');g.addColorStop(1, '#00000000');bc2.globalCompositeOperation = 'source-over';bc2.fillRect(20, 80, 60, 10);#b1 {&nbsp; display: none}#b2 {&nbsp; position: fixed;&nbsp; left: 5px;&nbsp; top: 5px;&nbsp; border: 1px solid red;}<div>&nbsp; <canvas id="b1" width="100" height="100"></canvas>&nbsp; <canvas id="b2" width="100" height="100"></canvas></div>