将多个形状绘制为一个

Question

我正在开发一个javascript应用程序，我在html画布上使用多边形绘制地图，这些多边形根据它们代表的含义有不同的颜色和阴影。 例如，森林由带有大阴影的绿色填充颜色表示，当然并非所有森林都相互连接，但有时确实与其他森林多边形非常接近。

现在的问题是，在某些情况下，一个森林的阴影被绘制在另一个森林的顶部，这会影响整个效果。

有没有办法一次填充所有这些（例如）森林多边形，以确保阴影（和其他样式）是正确的？ 或者可能是解决这个问题的另一种解决方案？

现状：

Answer 1

您可以尝试使用全局复合操作。如果使用source-out作为复合操作，则不应绘制森林的重叠区域。我不确定这是否适用于阴影......

请参阅 https://developer.mozilla.org/de/docs/Web/API/Canvas_API/Tutorial/Compositing 了解更多详情。

另外需要注意：您可能需要使用状态堆栈并在自己的堆栈层上绘制林。否则，所有形状都将受到全局复合操作的影响。

draw stuff
renderingContext.save()
   set composite operation
   draw forests
renderingContext.restore()
go on with drawing 

Answer 2

看起来我找到了一种实现目标的简单方法，

在实际填充多边形之前可以创建多个多边形，只要您始终返回到开始创建多边形的点，就不必为每个多边形开始新的路径

示例：

        c2.beginPath();

        //Create polygon 1
        c2.moveTo(8,8); //Move "cursor" to starting position
        c2.lineTo(8,16);
        c2.lineTo(16,16);
        c2.lineTo(16,8);
        c2.lineTo(8,8); //End the polygon at the starting position

        //Create polygon 2
        c2.moveTo(32,8);
        c2.lineTo(32,16);
        c2.lineTo(48,16);
        c2.lineTo(48,8);
        c2.lineTo(32,8);

        c2.closePath();

        //Fill both polygons
        c2.fill();