Question

更新我刚才意识到这只发生在Chrome中，所以我猜这是一个浏览器问题而不是编程问题？

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

圆圈本身是我正在导入的图像，然后我使用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 beta和33 dev构建创建正确形状的弧。

HTML Canvas arc方法不会排列曲线

1 个答案: