Canvas HTML5画布-线与alpha通道自相交

请查看（抱歉，新用户无法将图像直接插入帖子）。 线绘制为半透明颜色（alpha=0.5）。 当红线与自身交叉时，不会出现双重叠加半透明颜色。同时，应将叠加在红色上的绿线分开。 可以得出结论，在画布上绘制的线条以及整个区域都不是线性的。我认为这是不正确的行为

现场演示：

我不会问如何解决：）问题是意识形态：你如何看待这种行为

这是合乎逻辑的,应该是,

这是不符合逻辑的，但如果它发生了-我们假设该功能

Canvas以这种方式工作是出于技术原因——实现更简单

这是一个明显的bug，浏览器的作者应该修复它

---

对不起，我的英语不好。

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

这是合乎逻辑的,应该是, 让我们来探讨一下原因

绘制红色路径时，没有绘制单独的线。您正在绘制一条完整的路径，并且一次绘制一条完整的路径并同时对其进行笔划，并且路径的颜色不能“重叠”自身。这是本规范有意定义的。它：

由于子路径都作为一个笔划，因此在一个笔划操作中，路径的重叠部分将被视为它们的并集是绘制的

如果想要获得叠加效果，可以简单地使用多条路径，就像添加绿线一样。因此，在必要时，您可以轻松地以另一种方式进行

---

你应该考虑这个特性是一件好事：如果画布规范要求路径的每个子路径造成额外的覆盖，那么每个路径的拐角（每一条线被连接起来）看起来都很可怕！（有关每个角的外观示例，请参见红色连接）

由于交叉点上的路径重叠也意味着它将在每个角点上重叠，因此规范决定在笔划时仅使用联合路径，这将保持正常外观的角点作为预期默认值（我认为大多数人希望它们看起来像他们做的那样，而不是像我显示的那样）。如果这些线覆盖在交叉口上，但不是每个角落，那么这将不是一个一致的规则，这使得学习和解决变得更加困难

因此，我希望理由是清楚的。规范必须给我们三件事，通常按以下顺序：最常见的预期输出（角点看起来和它们一样）、一致性（如果我们在线交叉上重叠，我们也会在角点上重叠，所以我们不应该这样做），以及易于理解

---

好的规范总是一致的。如果某件事是一致的，那么它就更容易学习，一旦你知道为什么会这样做，这就更容易理解了。

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

这是合乎逻辑的,应该是, 让我们来探讨一下原因

绘制红色路径时，没有绘制单独的线。您正在绘制一条完整的路径，并且一次绘制一条完整的路径并同时对其进行笔划，并且路径的颜色不能“重叠”自身。这是本规范有意定义的。它：

由于子路径都作为一个笔划，因此在一个笔划操作中，路径的重叠部分将被视为它们的并集是绘制的

如果想要获得叠加效果，可以简单地使用多条路径，就像添加绿线一样。因此，在必要时，您可以轻松地以另一种方式进行

---

你应该考虑这个特性是一件好事：如果画布规范要求路径的每个子路径造成额外的覆盖，那么每个路径的拐角（每一条线被连接起来）看起来都很可怕！（有关每个角的外观示例，请参见红色连接）

由于交叉点上的路径重叠也意味着它将在每个角点上重叠，因此规范决定在笔划时仅使用联合路径，这将保持正常外观的角点作为预期默认值（我认为大多数人希望它们看起来像他们做的那样，而不是像我显示的那样）。如果这些线覆盖在交叉口上，但不是每个角落，那么这将不是一个一致的规则，这使得学习和解决变得更加困难

因此，我希望理由是清楚的。规范必须给我们三件事，通常按以下顺序：最常见的预期输出（角点看起来和它们一样）、一致性（如果我们在线交叉上重叠，我们也会在角点上重叠，所以我们不应该这样做），以及易于理解

---

好的规范总是一致的。如果某些东西是一致的，那么它就更容易学习，一旦你知道为什么会这样做，这就更容易理解。

“如果画布规范要求路径的每个子路径产生额外的覆盖，那么每个路径的角落都会看起来很可怕！”-是的，我理解。我认为它不应该是单独的子路径。这是一条实心路径和正常拐角。但这不是一个充满色彩的区域。这是一个线性物体。想象一下笔是如何在纸上画的。一个连续的动作。它的颜色可能会重叠？你必须从“我一行一行地构造一条路径”的角度来考虑它。当你用钢笔写L时，你可能不希望有任何重叠。如果你写一个V怎么办？如果你写一个很窄的V怎么办？如果你把一个V写得很窄，以至于只有两行在彼此的上面呢？这是一个你称之为角落和你不称之为角落的问题。为了保持一致，他们决定一视同仁。“如果Canvas规范要求路径的每个子路径产生额外的覆盖，那么每个路径的角落都会看起来很可怕！”-是的，我理解。我想是的