0

我正在 HTML 画布中绘制一个圆圈（r = 100 像素和 500 像素的线宽），使用 .arc 的画布 API 方法用于谷歌浏览器应用程序。

但由于线宽较大，圆圈中的不准确被放大了，看起来不再像一个圆圈了。

这是一个演示http://jsbin.com/ufofor/1/edit http://jsbin.com/ufofor/30/edit

var c = document.getElementById("canvas");
var g = c.getContext("2d");    
var r = 100;   

g.lineWidth = 500;    
g.arc(505, 505, r,0,2*Math.PI, true);
g.stroke();

有没有办法/hack 使用 .arc 方法或任何其他方法来制作一个完美的圆圈，在画布中具有大的 lineWidth ？

编辑

该演示在 Firefox 中运行良好，但在 chrome 中，您会发现生成的圆圈中有不规则性。

演示的 Chrome 屏幕截图

Firefox 演示截图

感谢@Felix 指出这一点。

4

3 回答 3

0

将您的 .arc 代码更改为以下代码会创建一个完美的圆圈 - 该方法的输入似乎有偏差：S

g.arc(505, 505, r2, 0, Math.PI / 360, true);
于 2013-02-24T12:41:46.133 回答
0

的签名arc是

arc(x, y, radius, startAngle, endAngle, anticlockwise)

其中startAngle和endAngle都是弧度。所以对于一个完整的圈子，你想从到画0——Math.PI * 2我不知道你从哪里得到的30。

此外，您可能想尝试使用fill()您的路径，而不是stroke()使用那种荒谬的线宽来处理它 - 这与奇数lineCap和lineJoin值相结合，可能是形状错误的结果的原因。

于 2013-02-24T12:50:08.697 回答
0

如果有人仍然需要 arc() 函数的“strokeWidth”之类的东西，“我自己的 2 美分”；）

// 10 is the strokeWidth for the arc()
for(var i=0; i<= 10; i++){
  context.arc(circleObj.center_x, circleObj.center_y, 50+i, 0, 2*Math.PI);
  context.stroke();
}

上面的内容甚至可以在调用“clip()”之前用作掩码；p

希望它至少帮助了一个有需要的灵魂.. ;)

奖金 ==> 我正在做的一件事让我在这里解决你的麻烦，因为我结束了我的：P

--> https://jsbin.com/xuvogoyizu/edit?js ,输出

单击并拖动以控制此“strokeWidth-ed弧形蒙版”的位置；）

于 2017-11-30T02:30:32.760 回答