HTML畫布圓弧方法不排隊曲線

更新我剛剛意識到，這隻發生在Chrome中，所以我猜這是瀏覽器問題，而不是編程問題？HTML畫布圓弧方法不排隊曲線

我正在繪製一個需要使用HTML5 Canvas分成可點擊部分的圓。

圓本身就是我導入圖像，然後我創建一個使用電弧法22分同樣分割的段：

var segments = 22; 
var segment = (2 * Math.PI)/segments 

can = document.getElementById('canvas'); 
ctx = can.getContext('2d'); 

ctx.strokeStyle = '#666'; 
ctx.fillStyle = '#ff9'; 

for (var i = 0; i < (segments); i++) { 
    ctx.beginPath(); 
    ctx.arc((can.width/2), can.height/2, can.width/2, segment * i, segment * (i+1), false); 
    ctx.lineTo(can.width/2, can.height/2); 
    ctx.closePath(); 
    ctx.stroke(); 
    ctx.fill(); 
}

我可以得到它做工精細，但曲線的邊緣不要與相鄰的弧線適當地躺在一起。

我已經創建了上面的小提琴來顯示問題http://jsfiddle.net/4sARr/。

我怎樣才能得到停止點排隊？

來源

2014-01-16 John Reid

正如我在更新中發現的，Chrome是罪魁禍首。版本31似乎沒有正確計算弧 - 但32測試版和33開發版創建正確形狀的弧。

來源

2014-01-16 14:11:32

HTML畫布圓弧方法不排隊曲線

回答

相關問題