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 中合并多个路径以作为一个集合进行填充和描边 显然也有类似的目标.但重点似乎是如何对路径执行布尔运算，可能是 clipper 的方式.因此，对于此处的这篇文章，我对预先操纵路径不感兴趣；我希望能够像往常一样绘制每个笔画.

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屋！