HTML5 Canvas - 线条与 alpha 通道自相交
请看图片（抱歉，新用户不能直接插入图片进入帖子）。 线条以半透明颜色绘制（alpha = 0.5）。 当红线与其自身交叉时，不会出现双重叠加半透明颜色。同时，将叠加在红色上的绿线按其应有的方式分开。 可以得出结论，画布上绘制的线条不是线性的，整个区域也是如此。我认为这是不正确的行为。
现场演示： jsfiddle.net/dom1n1k/xb2AY/
我不会问如何修复它:)问题是意识形态的：你如何看待这种行为？
- 这是符合逻辑的，也是应该的；
- 这是不合逻辑的，但如果它发生了 - 我们假设该功能；
- 由于技术原因，画布以这种方式工作 - 实现更简单。
- 这是一个明显的错误，浏览器的作者应该修复它。
PS 抱歉我的英语不好。
Please look at the picture (sorry, new users can't insert an image directly into post).
Lines are drawn semi-transparent colors (alpha = 0.5).
When the red line crosses itself, the double overlay translucent colors does not occur. At the same time, separate the green line superimposed on the red as it should.
It can be concluded that the lines are drawn on canvas is not linear, as well as the whole area. I think this is incorrect behavior.
Live demo: jsfiddle.net/dom1n1k/xb2AY/
I will not ask how to fix it :) The question is ideological: how do you think about this behavior?
- This is logical and it should be;
- This is not logical, but if it happened - we assume that feature;
- Canvas work that way for technological reasons - the implementation is simpler.
- This is an obvious bug, and the authors of browsers should fix it.
P.S. Sorry for my bad english.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
好问题！规范编写者（和我）相信答案是：
让我们探讨一下其中的原因。
当您绘制红色路径时，您并没有绘制单独的线。你正在绘制一条完整的路径，并且整个路径是一次性绘制的，一次性描边的，并且路径的颜色不能“重叠”本身。这是规范有意定义的。它内容如下：
如果您想获得叠加效果，您可以简单地使用多个路径，就像添加绿线一样。因此，必要时您可以轻松地以其他方式进行操作。
您应该认为此功能是一件好事：如果 Canvas 规范要求路径的每个子路径产生额外的覆盖，那么每个路径的角（每条线的连接处）看起来会很糟糕！ （请参阅此处的红色连接，了解每个角的外观示例）
由于路径重叠在十字架上也意味着它会在每个角上重叠，规范决定在抚摸时仅使用并集路径，这将正常外观的角保持为预期的默认值（我认为大多数人会期望它们看起来像现在这样，不像我显示）。如果这些线覆盖在交叉口而不是每个角落，那么这将不是一个一致的规则，这使得学习和解决问题变得更加困难。
所以我希望推理是清楚的。该规范必须为我们提供三件事，通常按以下顺序：最常见的预期输出（角落看起来像它们一样），一致性（如果我们在线交叉上覆盖，我们也会在角落上这样做，所以我们应该'不这样做），并且易于理解。
好的规范始终是一致的。如果某件事是一致的，那么它就更容易学习，一旦你知道为什么要这样做，就会更容易理解。
Great question! The spec writer (and I) believe that the answer is:
Lets explore the reasoning for this.
You are not drawing separate lines when you draw the red path. You are drawing an entire path, and an entire path is drawn all at once and stroked all at once, and the color of the path cannot "overlap" itself. This is intentionally defined by the specification. It reads:
If you wanted to get an overlay effect you could simply use multiple paths, as you do by adding the green line. So you can easily do it the other way when necessary.
You should consider this feature a good thing: If the Canvas spec were to require each subpath of the path to cause an additional overlay then the corners of every path (where each line is joined) would look horrible! (see the red connections here for an example of what each corner would look like)
Since having the path overlap on the crosses also means it would overlap on every corner, the specification decides to only use the union'd path when stroking, which keeps normal-looking corners as the expected default (I think most people would expect them to look as they do, not to look as I showed). If the lines were overlaid on the crossings but not every corner then it would not be a consistent rule, which makes it much harder to learn and work around.
So the reasoning is clear I hope. The specification has to give us 3 things, usually in this order: The most-common expected output (corners look as they do), consistency (if we overlaid on line crosses we'd also be doing it on corners, so we shouldn't do it), and ease of understanding.
A good specification is always consistent. If something is consistent then it is more learnable, which makes it easier to understand once you know why something is done that way.