试图在画布中画圆弧 - 奇怪的行为

我试图让圆弧出弧（类似于圆环图的东西就是我想要实现的视觉效果），并且我成功了。但是，边缘看起来像一个4岁的孩子吸引他们！试图在画布中画圆弧 - 奇怪的行为

这是如何我画我的弧线：

var arc = new Kinetic.Shape({ 
    drawFunc: function(canvas) { 
     var context = canvas.getContext('2d'); 

     var x = Math.round(canvas.width/2); 
     var y = Math.round(canvas.height/2); 
     var radius = 210; 
     var startAngle = 1.44 * Math.PI; 
     var endAngle = 1.83 * Math.PI; 
     var counterClockwise = false; 

     context.beginPath(); 
     context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
     context.lineWidth = 175; 
     canvas.fillStroke(this); 
    }, 
    stroke: '#121b21', 
    strokeWidth: 175 
});

我创建了一个例子fiddle。

我是新来的画布，所以我想它可能是我... 有人请让我知道如果我在这里做错了什么？

谢谢！

来源

2013-02-11 Svemirko

你关心每个“楔形”片段之间的空白吗？你能更具体地了解你想要解决的问题吗？ – 2013-02-11 20:53:00

你需要的是一个弧形。 KineticJS将在3月初发布 – 2013-02-14 06:01:25

这是WebKit浏览器中存在的粗犷弧形错误。这可能是由于弧绘图代码中的一些舍入问题。你会发现它很可能在其他浏览器中看起来很好。对于Webkit，您可以使用另一种方法同时绘制这些楔子。

可能的解决方法：

使用您现在有方法，而是把一个白色的圆圈，中间一旦你用楔子做遮住了内部违规
使用Kinetic.Wedge而不是上下文。弧。

来源

2013-02-11 20:58:13 Plynx

我想我太相信铬了......谢谢！ – Svemirko 2013-02-11 21:04:20

编辑是一个好主意，但我会覆盖中间的，所以没关系。我担心外线只能让内线看得更清楚，以便更容易发现我的观点。 – Svemirko 2013-02-11 21:08:49

我认为Kinetic.Wedge是要走的路！谢谢！ – Svemirko 2013-02-11 21:23:21

试图在画布中画圆弧 - 奇怪的行为

回答

相关问题