HTML5:在通过JavaScript绘制后将透明度应用于Canvas

Question

我正在尝试将多个对象绘制到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 B B B
    B B B B

因为蓝色矩形在绘制时是透明的,所以之前隐藏的黄色框的角现在可见.那只是丑陋的.

请记住:正在消失的画布和背后的元素都是复杂的,动态的混乱; 手动跟踪正在绘制的每个对象以及它们如何重叠将很快失控,并且使用纯色覆盖来"伪造"淡出也是不可行的解决方案.

虽然我愿意使用CSS透明度实现这一点,但如果它真的是最好的方法,我希望用canvas本身来实现这一点.我遇到了画布像素操作,这可能是一个选项,但我担心我可能会忽略一种更简单,有效的处理方式.

有任何想法吗？

Answer 1

为了有一个明显的效果,淡出当前的画布,你可以在完全填充任何颜色时使用'destination-out'操作:这会使画布不受影响......除非你将globalAlpha降低到x,否则产生的alpha将乘以1-x.

(http://dev.w3.org/fxtf/compositing-1/#porterduffcompositingoperators_srcout)

jsbin:

http://jsbin.com/cecavojepa/1/edit?js,output

核心衰落功能:

function fadeCanvas() {
  ctx.save();
  ctx.globalAlpha = 0.1;
  ctx.globalCompositeOperation='destination-out';
  ctx.fillStyle= '#FFF';
  ctx.fillRect(0,0,cv.width, cv.height);    
  ctx.restore();   
}