html - Html5中的一个光滑圆圈

Question

我正在尝试用 HTML5 中的画布绘制一个圆圈。我使用了 w3schools 的示例，但结果很丑陋，不流畅。有可能有一个光滑的圆圈吗？（我用 Chrome 和 IE9 试过这个）

我使用的代码：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(125,120,100,0,2*Math.PI);
ctx.stroke();

=> http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path2：原始示例 => http://jsfiddle.net/jPeKk/：我的尝试，更大

Answer 1

在 chrome 上，这是一个已在此处讨论的已知问题 -我可以在 HTML <canvas> 元素上关闭抗锯齿功能吗？

和这里 -如何在 Chrome Windows 下的 html5 画布中消除锯齿 clip() 边缘？

尝试

ctx.webkitImageSmoothingEnabled=true;

让你的线条更流畅。

Answer 2

另一个对我有用的解决方案（尽管我认为这更像是一种技巧而不是正确的解决方案）是用相同的颜色在圆圈周围画一条线。出于某种原因，这将非常顺利。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(100, 100, 60, 0, 2 * Math.PI, false);
context.fillStyle = '#775599';
context.fill();

context.beginPath();
context.arc(200, 200, 60, 0, 2 * Math.PI, false);
context.fillStyle = '#775599';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#775599';
context.stroke();