将多个形状绘制为一个答案

【问题标题】：Draw multiple shapes as one将多个形状绘制为一个
【发布时间】：2015-07-08 17:34:31
【问题描述】：

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

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

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

目前情况：

【问题讨论】：

在绘制森林之前绘制所有阴影。如果可以将它们分开。
@fuyushimoya 我正在考虑这个问题，但这不会显着增加渲染所有内容所需的时间吗？
我认为它会影响，但我不确定是否有其他方法可以避免该阴影问题。
考虑运行一些小型单元测试来尝试@fuyushimoya 建议的技术，看看它对性能的影响有多大。如果您可以看到小规模的指数增长，那么它很有可能会在全面实施后呈线性或指数增长，对您和您的用户不利。
@kayleeFrye_onDeck 和 @fuyushimoya 谢谢，我会试试看结果如何。

标签： javascript html canvas

【解决方案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

【讨论】：

【解决方案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();

【讨论】：