小编Kor*_*Den的帖子

我正在尝试将多个对象绘制到canvas元素,然后将它们淡出淡出.但是,当尝试使用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 …