CanvasRenderingContext2D中的透明度组 [英] Transparency groups in CanvasRenderingContext2D

问题描述

有一种方法可以将多个绘制操作组合到2D画布渲染上下文中，使得他们的组合的结果组合到画布的先前内容上，而不是每个绘制操作

Is there a way to combine multiple draw operations to a 2d canvas rendering context in such a way that they their combined result is composed onto the previous content of the canvas, as opposed to each drawing operation being composed by itself?

一个应用程序：我想绘制一个带有箭头的半透明线，我想避免增加不透明度的那些区域线和箭头重叠。

One application: I'd like to draw a translucent line with an arrow head, and I'd like to avoid increased opacity in those areas where the line and the arrow head overlap.

许多其他渲染模型支持此类功能。 SVG具有组不透明度设置，如第14.5节所述。 PDF参考说明了透明组，见7.3节。在许多图形应用程序中，用户可以构建图层，然后将它们组合为一个整体。

Many other rendering models support such features. SVG has a group opacity setting, described in section 14.5. The PDF reference describes "Transparency Groups" in section 7.3. In many graphics applications a user can build layers and then compose them as a whole.

我想我可以设置第二个不可见的画布来用作离屏图片，将我的内容呈现给我们，然后使用 globalAlpha 将结果以所需的半透明度组合到主画布上。但我希望有一些更优雅的解决方案，即使我到目前为止找不到它在文档中。

I guess I could set up a second invisible canvas to be used as an off-screen image, render my content to that and then use globalAlpha to compose the result onto the main canvas with the desired translucency. But I hope that there is some more elegant solution, even if I couldn't find it in the docs so far.

在CanvasRenderingContext2D中合并多个路径以填充和敲击作为一个集合显然有一个类似的目标。但是，重点似乎是如何对路径执行布尔运算，可能是翻译器的方式。所以对于这篇文章，我不感兴趣的操纵前面的路径;

Merge multiple paths in CanvasRenderingContext2D to fill and stroke as a set apparently has a similar goal in mind. But the focus there appears to be how to perform boolean operations on paths, probably the way clipper does it. So for this post here, I'm not interested in manipulating the paths up front; I want to be able to draw each stroke as I usually would.

推荐答案

不，这是目前不可能没有使用中间画布

No, that's currently not possible without using an intermediate canvas.

除非所有的问题绘图操作可以合并成一个路径，因此使用 stroke（）和 fill（）。我假设这不是这里的情况，但后来搜索的人可能正在寻找这些信息。

Unless all of your draw operations in question can be combined into a single path, thereby using a single call to stroke() and fill(). I assume that's not the case here, but people searching later may be looking for that information.

// two rectangles composed into a single draw operation:
ctx.rect(0, 0, 10, 10);
ctx.rect(5, 5, 10, 10);
ctx.fill();

// With transparency, the above produces a different result from:
ctx.rect(0, 0, 10, 10);
ctx.fill();
ctx.rect(5, 5, 10, 10);
ctx.fill();

这篇关于CanvasRenderingContext2D中的透明度组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！