HTML5：通过JavaScript绘制后将透明度应用于Canvas [英] HTML5: Apply transparency to Canvas after drawing through JavaScript

问题描述

我试图将多个对象绘制到画布元素上，然后将它们干净地淡出。但是，当尝试使用globalAlpha实现此目的时，您会看到通常会被遮盖的对象片段，因为每个对象都变得单独透明。解释：

I'm attempting to draw multiple objects to a canvas element, and then fade them out cleanly. However, when attempting to use globalAlpha to achieve this, you can see pieces of objects that would normally be obscured, as each object becomes individually transparent. To explain:

请考虑以下代码：

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

根据需要，蓝色框完全覆盖了黄色框。但是，当我们开始增加透明度时：

The blue box completely covers the yellow box, as desired. However, when we start to add transparency into the mix:

context.globalAlpha=0.5;
context.fillStyle="yellow";
context.fillRect(0,0,100,100);
context.fillStyle="blue";
context.fillRect(50,50,100,100);

我们最终得到以下结果：

We end up with this:

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

由于蓝色矩形在绘制时是透明的，因此现在可以看到以前被遮盖的黄色框。

Because the blue rectangle is transparent when it's being drawn, the corner of the yellow box that was previously obscured is now visible. And that's just ugly.

请紧记：淡出的画布及其背后的元素都是复杂而动态的混乱；手动跟踪正在绘制的每个对象以及它们如何重叠将很快失去控制，同样，使用纯色叠加层伪造淡出效果也不可行。

Keep in mind: both the canvas that's being faded out and the elements behind it are a complicated, dynamic mess; manually tracking every object that's being drawn and how they overlap would get out of control very quickly, and it's likewise not a viable solution to use a solid-color overlay to "fake" a fade out.

虽然我愿意使用CSS透明度来实现这一目标（如果这确实是最好的方法），但我希望可以使用canvas本身来实现。我遇到了画布像素操作，也许是一种选择，但我担心我可能忽略了一种更简单有效的处理方法。

While I'm open to using CSS transparency to achieve this if it's really the best way to go, I'm hoping to accomplish this using canvas itself. I've come across canvas pixel manipulation, which might be an option, but I'm concerned I might be overlooking a much simpler, efficient way of handling this.

任何想法吗？

推荐答案

要获得清晰的效果以使当前画布淡出，可以在完全填充任何颜色时使用 destination-out操作：画布保持不变...除非将globalAlpha降低到x，否则生成的alpha将乘以1-x。

To have a clear effect that will fade out the current canvas, you can use the 'destination-out' operation when completely filling with any color : this leaves the canvas untouched... Unless you lower the globalAlpha to x, then the resulting alpha will be multiplied by 1-x.

（ http：// dev.w3.org/fxtf/compositing-1/#porterduffcompositingoperators_srcout ）

jsbin：

http://jsbin.com/cecavojepa/1/edit?js，输出

核心衰落函数：

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();   
}

这篇关于HTML5：通过JavaScript绘制后将透明度应用于Canvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！