HTML5 Canvas - 线条与 alpha 通道的自相交答案

【问题标题】：HTML5 Canvas - lines self-intersection with alpha-channelHTML5 Canvas - 线条与 alpha 通道的自相交
【发布时间】：2011-09-27 15:33:28
【问题描述】：

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

我不会问如何解决它 :) 问题是意识形态的：你如何看待这种行为？

附：对不起我的英语不好。

【问题讨论】：

【解决方案1】：

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

让我们探讨一下其中的原因。

绘制红色路径时，您没有绘制单独的线。您正在绘制一条完整的路径，一条完整的路径一次全部绘制并一次全部描边，并且路径的颜色不能“重叠”自身。这是规范有意定义的。它reads：

由于所有子路径都被描画为一个，因此一次描边操作中路径的重叠部分被视为它们的并集是绘制的。

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

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

由于路径重叠在十字架上也意味着它会在每个角落重叠，规范决定在抚摸时只使用联合路径，这将保持正常的角落作为预期的默认值（我想大多数人会期望他们看起来像他们一样，而不是看起来像我展示的那样）。如果线覆盖在交叉路口而不是每个角落，那么这将不是一个一致的规则，这使得学习和解决变得更加困难。

所以我希望推理很清楚。规范必须给我们 3 件事，通常按这个顺序：最常见的预期输出（角落看起来像他们一样），一致性（如果我们覆盖在线交叉，我们也会在角落做，所以我们应该' t 这样做），并且易于理解。

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

【讨论】：

“如果 Canvas 规范要求路径的每个子路径产生额外的覆盖，那么每个路径的拐角都会看起来很糟糕！” - 是的，我明白了。我认为它不应该是单独的子路径。这是一个坚实的路径和正常的角落。但这不是一个充满色彩的区域。这是一个线性对象。想象一下钢笔是如何在纸上画画的。一个连续的动作。它的颜色可能与自身重叠？
您必须从“我逐行构建路径”的角度来考虑它。当您用笔写 L 时，您可能不会期望任何重叠。如果你写一个V呢？如果你写一个非常窄的 V 怎么办？如果你写的 V 太窄以至于只有两行重叠怎么办？什么叫角落，什么叫不叫，这是一个问题。为了保持一致，他们决定一视同仁。