HTML 画布弧形方法不对齐曲线

Question

UPDATE我刚刚意识到这只发生在 Chrome 中，所以我想这是浏览器问题而不是编程问题？

我正在绘制一个圆圈，需要使用HTML5画布将其拆分为可点击的部分。

圆本身是我导入的图像，然后我使用 arc 方法创建 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/显示问题。

如何让停靠点排队？

Answer 1

正如我在更新中发现的那样，Chrome是罪魁祸首。版本 31 似乎没有正确计算弧线 - 但 32 个测试版和 33 个开发版本创建了正确形状的弧线。