HTML5画布上的不完美球绘制

Question

HTML5画布在特定条件下似乎会绘制不完美的球。 当背景为红色时，有一个带黑色轮廓的蓝色圆圈，似乎轮廓在左侧较宽，在右侧较窄。 这是一个演示页面: https://jsfiddle.net/omgszg38/4/。你觉得呢？
这是绘制球的代码：

d.beginPath();
d.fillStyle = "blue";
d.arc(x,y,radius,0,Math.PI*2,false);
d.fill();

d.lineWidth = 1; //Ball stroke

d.beginPath();
d.arc(x,y,radius,0,Math.PI*2,false);
d.stroke();

注意：我已经在另一个论坛上寻求帮助，并且这里是链接，如果您需要更多信息：http://www.webdeveloper.com/forum/showthread.php?359393-Imperfect-Ball-drawing-on-HTML5-Canvas。这与IT技术有关，涉及HTML5 Canvas上的不完美球绘制问题。

- Benur21

---

当我最初看到它时，它给我感觉底部比顶部要窄 - 但是放大后看起来没问题。在花费一些时间试图弄清楚它是否是一种视觉错觉后，我意识到如果你把头转向左边，内圆会向右移动，反之亦然...给人一种一侧比另一侧更窄的印象。看起来这只是一种视觉错觉。 - David

也许是由于子像素渲染的原因。另外，您不必画两次圆形 https://jsfiddle.net/ym5a5fdd/ - Alexey Lebedev

有放大镜吗？试着用它或裸眼数像素。 - Benur21

@AlexeyLebedev 你说的亚像素渲染是什么意思？那个小调查中的球也不完整。 - Benur21

@Benur21 在评论中解释太多了，只需搜索“亚像素渲染”即可。这种伪影在红色和蓝色中最为突出，这里有另一个例子：https://jsfiddle.net/o0akgwnw/ 所有条纹的宽度都相同，但一些黑色条纹看起来更窄。我的第一个 fiddle 只是展示了你可以节省一个 arc() 调用，它并不打算看起来更对称。 - Alexey Lebedev

https://jsfiddle.net/omgszg38/5/ - Benur21

Answer 1

可能只是一种视觉错觉。如果将描边设置为白色，它看起来就很好了。

- Derek

---

转动你的头（或屏幕）。为什么右边还不够宽，左边却变窄了呢？ 如果需要，将球置于画布中心。 - Benur21

可能问题更多与填充(fill)而非描边(stroke)有关。如果去掉填充，边框会变得均匀。 - Derek

Chromostereopsis：http://luminanze.com/writings/chromostereopsis_in_ux_design.html - Carlos Mermingas