将多个形状绘制为一体

Question

我正在开发一个javascript应用程序，在这个应用程序中，我使用html画布上的多边形绘制了一张地图，这些多边形有不同的颜色和阴影，取决于它们所代表的是什么。例如，森林用绿色填充颜色表示，阴影很大，当然不是所有的森林都彼此相连，但有时真的真的很接近其他的森林多边形。

现在的问题是，在某些情况下，一片森林的阴影被画在另一片森林的顶部，从而扼杀了整个效果。

有没有一种方法可以同时填充所有这些(例如)森林多边形，以确保阴影(和其他样式)是正确的？或者，解决这一问题的另一个解决办法是什么？

现状：

​

Answer 1

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

在实际填充多边形之前创建多个多边形是可能的，只要始终回到开始创建多边形的点，就不必为每个多边形启动一条新的路径

示例：

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

Answer 2

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

有关更多详细信息，请参阅API/Tutorial/Compositing。

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

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