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();

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

Answer 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;

让你的线条更流畅。

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();

Html5中的一个光滑的圆圈

2 个答案: