CanvasRenderingContext2D 中的透明度组

有没有一种方法可以将多个绘制操作组合到 2d 画布渲染上下文中，从而使它们各自独立combined结果被组合到画布的先前内容上，而不是每个绘图操作都由其本身组合？

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

许多其他渲染模型都支持此类功能。 SVG 有一个组不透明度 https://www.w3.org/TR/SVG11/masking.html#ObjectAndGroupOpacityProperties设置，如第 14.5 节所述。这PDF 参考 https://wwwimages2.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/pdf_reference_1-7.pdf第 7.3 节中描述了“透明组”。在许多图形应用程序中，用户可以构建图层，然后将它们组合为一个整体。

我想我可以设置第二个不可见画布用作屏幕外图像，将我的内容渲染到该画布上，然后使用globalAlpha https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha以所需的半透明度将结果合成到主画布上。但我希望有一些更优雅的解决方案，即使到目前为止我在文档中找不到它。

合并 CanvasRenderingContext2D 中的多个路径以作为一组进行填充和描边 https://stackoverflow.com/q/35988889/1468366显然也有类似的目标。但重点似乎是如何对路径执行布尔运算，可能是这样clipper https://sourceforge.net/projects/jsclipper/可以。因此，对于这篇文章，我对预先操纵路径不感兴趣；我希望能够像平常一样画出每一笔。

不，如果不使用中间画布，目前这是不可能的。

Unless所有有问题的绘制操作都可以组合成一个路径，从而使用一次调用stroke() and fill()。我认为这里的情况并非如此，但后来搜索的人可能正在寻找该信息。

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