Html5中的一个光滑圆圈

Posted 2023-02-25

【中文标题】Html5中的一个光滑圆圈

【英文标题】：A smooth circle in Html5

【发布时间】：2012-11-04 16:56:39

【问题描述】：

我正在尝试用 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/ : 我的尝试，更大

【问题讨论】：

您是否愿意使用 css 来构建您的圈子？ davidwalsh.name/css-circles

我的目标是构建用户可以编辑的形状（缩放、旋转等）。如果解决方案是避免使用画布，为什么不呢，但我对这个结果有点惊讶，这是一个非常基本的功能......

【参考方案1】：

在 chrome 上，这是一个已在此处讨论的已知问题 - Can I turn off antialiasing on an HTML <canvas> element?

这里 - How to anti-alias clip() edges in html5 canvas under Chrome Windows?

试试

ctx.webkitImageSmoothingEnabled=true;

让你的线条更流畅。

【讨论】：

谢谢你的回答，但我没看出有什么不同：jsfiddle.net/CSgGJ

【参考方案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();