Question

我目前正在使用CanvasRenderingContext2D中的路径绘制一组重叠的形状。这很好用但是我现在想要将所有这些路径联合起来，这样当我使用半透明颜色填充时，重叠不会显示。另外，我想描绘联合形状的轮廓。有关如何实现这一目标的任何建议吗？

Answer 1

如果您不希望重叠的半透明像素进行交互，可以将半透明像素（RGBA格式）更改为等距不透明像素（RGB格式）。

function RGBAtoRGB(r, g, b, a, backgroundR,backgroundG,backgroundB){
    var r3 = Math.round(((1 - a) * backgroundR) + (a * r))
    var g3 = Math.round(((1 - a) * backgroundG) + (a * g))
    var b3 = Math.round(((1 - a) * backgroundB) + (a * b))
    return "rgb("+r3+","+g3+","+b3+")";
}

您必须使用单独的beginPath绘制每个子形状。这是必要的，因为每个beginpath只能获得一个样式（样式== fillStyle）。

根据您的设计要求，您可能需要重新排列子形状的绘制顺序，以便所需的不透明形状位于顶部。

Answer 2

谢谢Mark，但我认为我找到了更好的方法。

我在空白的bitmapdata上绘制我的形状，然后将其用作alpha蒙版......

合并CanvasRenderingContext2D中的多个路径以填充和描边作为集合

2 个答案: