Question

我在HTML画布中绘制了一个圆圈（r = 100px和line宽度为500 px），使用了针对Google Chrome应用的.arc of canvas 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();

使用.arc方法还是其他任何方法，是否有任何方法/黑客可以创建一个完美的圆形，画布中有大的lineWidth？

修改

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

Chrome screenshot of demo

Firefox screenshot of demo

感谢@Felix指出这一点。

Answer 1

将.arc代码更改为以下内容会创建一个完美的圆圈 - 该方法的输入看起来很ske：S

g.arc(505, 505, r2, 0, Math.PI / 360, true);

Answer 2

arc的签名是

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

startAngle和endAngle都位于radians。所以对于一个完整的圆圈，你想从0绘制到Math.PI * 2 - 我不知道你从哪里得到30。

此外，你可能想尝试fill()你的路径，而不是stroke()使用那个荒谬的线宽 - 这与奇数lineCap和{{1}相结合}值，可能是错误结果的原因。

Answer 3

＆＃34;我自己的2美分＆＃34;如果有人仍然需要＆＃34; strokeWidth＆＃34;用于arc（）函数;）

＆＃13;

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

＆＃13;

上述内容甚至可以在致电＆＃39; clip（）＆＃39;之前使用。用作面具; p

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

BONUS ==＆gt;我工作的其中一件事让我在这里解决你的麻烦，因为我结束了我的：P

- ＆GT; https://jsbin.com/xuvogoyizu/edit?js,output

点击＆amp;拖动来控制这个＆＃34; strokeWidth-ed arc mask＆＃34; ;）

在画布中绘制一个完美的圆圈，在chrome中使用大的lineWidth

3 个答案: