試圖在畫布中畫圓弧 - 奇怪的行爲

我試圖讓圓弧出弧（類似於圓環圖的東西就是我想要實現的視覺效果），並且我成功了。但是，邊緣看起來像一個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

試圖在畫布中畫圓弧 - 奇怪的行爲

回答

相關問題