无法在Canvas动画中将背景更改为白色

Question

我找到了适合自己网站的Canvas动画，但是当用浅色背景替换背景时，我无法从中删除背景（或用白色替换背景），该动画立即消失。

我刚开始熟悉Canvas，所以不要发誓。

这是正常背景（第162行）：https://codepen.io/obiwan-kenobi/pen/vQyBxP

 drawGradient ({ctx, canvas, bounds}) {
 ctx.fillStyle = '# 252f3d';
 ctx.fillRect (... bounds.params); }

但是使用白色（我将其设置为灰色以便可以看到动画，但是在白色上根本没有，第162行）：https://codepen.io/obiwan-kenobi/pen/GwNKYg

 drawGradient ({ctx, canvas, bounds}) {
 ctx.fillStyle = '# e2e1e1';
 ctx.fillRect (... bounds.params); }

Answer 1

您发布的示例使用名为“ screen”的特定合成操作，该操作总是导致颜色变浅。由于没有比白色更浅的颜色，因此所有形状在白色背景上都是不可见的。

要解决您的特定问题，可以将该属性的值从“屏幕”更改为“乘”，将背景更改为白色：

// row #162
ctx.fillStyle = '#FFFFFF';

/// .....

// row #450:
 ctx.globalCompositeOperation = 'multiply';

Demo

此属性的所有可用值都可以在这里找到-> globalCompositeOperation reference