不完美的球在HTML5上绘图Canvas

HTML5 Canvas似乎在某些情况下绘制不完美的球。当有红色背景和黑色轮廓的蓝色圆圈时，似乎轮廓在左侧较宽而在右侧较薄。这是一个小提琴说明：https://jsfiddle.net/omgszg38/4/。你也不觉得吗？
这里是绘制球代码：不完美的球在HTML5上绘图Canvas

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

来源

2016-11-06 Benur21

当我最初看到它时，它似乎在底部比顶部更薄 - 但放大它看起来没问题。花了一些时间试图找出是否是光学错觉后，我意识到如果你把头转向左边，内圈看起来向右移动，反之亦然......给人的感觉是，它的一侧比其他。看起来，这只不过是一种错觉。 – David

也许是因为子像素渲染。在不相关的说明中，您不必画两次圆圈https://jsfiddle.net/ym5a5fdd/ –

有放大镜吗？尝试用它或用肉眼来计算像素。 – Benur21

可能一种错觉。如果将笔画设置为白色，则显示效果良好。

来源

2016-11-06 17:02:22 Derek

转动你的头（或屏幕）。为什么它不是在右边更宽，左边更薄呢？如果需要，将球置于画布上。 – Benur21

此外，使用fill（）比中风可能会出现更多问题。如果你删除填充边界是平坦的。 – Derek

Chromostereopsis：http://luminanze.com/writings/chromostereopsis_in_ux_design.html –

不完美的球在HTML5上绘图Canvas

回答

相关问题