我试图将多个对象绘制到画布元素上,然后将它们干净地淡出。然而,当尝试使用 globalAlpha 来实现此目的时,您可以看到通常会被遮挡的对象片段,因为每个对象都变得单独透明。解释:
考虑以下代码:
context.fillStyle="yellow";
context.fillRect(0,0,100,100);
context.fillStyle="blue";
context.fillRect(50,50,100,100);
这将创建一个像这样的图像:
Y = Yellow, B = Blue
Y Y Y Y
Y Y Y Y
Y Y B B B B
Y Y B B B B
B B B B
B B B B
根据需要,蓝色框完全覆盖黄色框。然而,当我们开始增加透明度时:
context.globalAlpha=0.5;
context.fillStyle="yellow";
context.fillRect(0,0,100,100);
context.fillStyle="blue";
context.fillRect(50,50,100,100);
我们最终得到这样的结果:
Y = Yellow, B = Blue, M = Mix of both
Y Y Y Y
Y Y Y Y
Y Y M M B B
Y Y M M B B
B B B B
B B B B
由于蓝色矩形在绘制时是透明的,因此之前被遮挡的黄色框的角现在可见。那太丑了。
请记住:淡出的画布及其背后的元素都是复杂的、动态的混乱;手动跟踪正在绘制的每个对象以及它们如何重叠会很快失去控制,并且使用纯色叠加来“伪造”淡出同样不是一个可行的解决方案。
虽然我愿意使用 CSS 透明度来实现这一目标(如果这确实是最好的方法的话),但我希望使用画布本身来实现这一目标。我遇到过画布像素操作 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas,这可能是一个选择,但我担心我可能会忽略一种更简单、更有效的处理方法。
有任何想法吗?