HTML5画布 - 带有alpha通道的线条自相交

Question

请查看图片（抱歉，新用户不能直接在帖子中插入图像）。 线条以半透明颜色绘制（alpha = 0.5）。 当红线交叉时，不会发生双重覆盖的半透明颜色。同时，绿线与红线分离重叠。 可以得出结论，画布上绘制的线条不是线性的，整个区域也是如此。我认为这是不正确的行为。

现场演示：jsfiddle.net/dom1n1k/xb2AY/ 我不会问如何解决它 :)问题是思想性的：您对这种行为有什么看法？

1. 这是合乎逻辑的，应该这样做；
2. 这不合逻辑，但如果发生了-我们认为这是特征；
3. Canvas因技术原因而工作-实现更简单。
4. 这是一个明显的错误，浏览器的作者应该修复它。

P.S. 对不起我的英语不好。

- dom1n1k

Answer 1

很好的问题！规范编写者（和我）认为答案是：

1. 这是符合逻辑的，应该这样做；

让我们探讨一下这个推理。

当你画红色路径时，你并没有画出单独的线条。你正在绘制整个路径，整个路径一次性绘制并描边，路径的颜色不能“重叠”自己。这是规范有意定义的。它解释道：

由于所有子路径都被一起描边，因此在一次描边操作中路径的重叠部分被视为其联合被涂绘的部分。

如果您想要获得覆盖效果，可以简单地使用多条路径，就像您添加绿线一样。所以必要时您可以轻松地采用另一种方式。

您应该将此功能视为一件好事：如果Canvas规范要求路径的每个子路径都引起额外的覆盖，那么每个路径的拐角处（每条线连接处）看起来都会很糟糕！ （请参见此处红色连接的示例，以查看每个角落的外观）

由于在十字路口上使路径重叠也意味着它将重叠在每个拐角处，所以规范决定只在描边时使用联合路径，这保持了正常外形的拐角作为预期的默认值（我认为大多数人都希望它们看起来像它们现在的样子，而不是像我展示的那样）。如果线条在交叉点上叠加但不在每个拐角处上，则它将不是一个一致的规则，这使得学习和解决问题变得更加困难。

所以推理很清楚，希望能对您有所帮助。规范通常按照以下顺序给我们三件事：最常见的预期输出（拐角看起来像它们现在的样子）、一致性（如果我们在线路交叉点上叠加，我们也会在拐角处这样做，因此我们不应该这样做）和易于理解。

好的规范始终是一致的。如果某事是一致的，那么它就更容易被学习，一旦您知道为什么要这样做，就更容易理解。

- Simon Sarris

---

如果Canvas规范要求路径的每个子路径都会导致额外的叠加效果，那么每条路径的角落看起来会很糟糕！- 是的，我明白了。 我认为它不应该是单独的子路径。这是一条完整的路径，有正常的角落。但这不是一个填充颜色的区域，而是一个线性对象。 想象一下笔在纸上画画的过程，是连续的动作。它的颜色可能会重叠吗？ - dom1n1k

你必须从“逐行构建路径”的角度来考虑。当你用笔写一个L时，你可能不会期望有任何重叠。如果你写一个V呢？如果你写一个非常窄的V呢？如果你写一个非常窄的V，以至于它只是两条线重叠在一起呢？这是一个问题，关乎你如何定义一个拐角和你如何不定义。为了保持一致，他们决定将所有情况都视为相同。 - Simon Sarris