如何让我的HTML5画布上的弧线更加平滑，或者说更加抗锯齿化？

Question

以下是用HTML5画布绘制的弧形。我该如何使弧形外部更加平滑，减少像素化或增加抗锯齿效果？ 下面是创建上述弧形所使用的代码：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = new Image();
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 100;
var startAngle = Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
var outX = x
var outY = y
var vari1 = .1;
var endAngle = startAngle + vari1 * Math.PI;
context.beginPath();
context.arc(outX, outY, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 25;
context.strokeStyle = '#FA603D';
context.stroke();
context.closePath();

<canvas id="myCanvas"></canvas>

- Reshma

---

我看不出问题在哪里：http://jsfiddle.net/DerekL/eu6uK/ - Derek 朕會功夫

看弧形的顶部，你会发现它不够平滑。这就是问题所在。我需要知道是否有任何方法可以使其平滑，而不会在外部产生颗粒效果。 - Reshma

这张图片已经在我的浏览器（Chrome和Firefox）上实现了反锯齿效果：http://i.stack.imgur.com/9jXHx.png - Derek 朕會功夫

我也没有看到任何问题...顺便说一下，你的HTML5代码非常标准。我认为你的问题可能是CSS样式。https://dev59.com/P2025IYBdhLWcg3wZlHd。如果你的画布被CSS缩放，它不会获得额外的像素，因此分辨率质量会降低。 - Herrington Darkholme

可能是HTML5画布描边没有反锯齿的重复问题。 - user719662

Answer 1

我认为除非使用视网膜显示器，否则你无法做到这一点（不是在讽刺）。

通过减少弧线和背景之间的对比度，可以营造更加流畅的假象。

如果你绘制的是直线而不是弧线，在Chrome中关闭反锯齿功能可以使线条更加清晰。

- markE

---

有没有编程的方法可以使弧线更加平滑呢？（我们不能指望每个人都使用更高分辨率的系统，对吧） - Reshma

我没找到——我已经努力寻找了。这个弧线突出了计算机显示器上使用的矩形像素带来的问题，就像老话说的“圆钉不可插入方孔”一样。如果符合您的设计，您可能需要认真考虑在弧线和背景中使用颜色对比更小的选择。或者，纯黑色背景会欺骗眼睛看到一个更平滑的橙色弧线——因此黑色或深色背景网站非常受欢迎。很抱歉，我认为在您的情况下没有好的解决方案。 - markE