试图在画布中绘制弧线 - 奇怪的行为

Question

我正在尝试用弧线制作一个圆（类似于圆环图的东西是我想要在视觉上实现的）并且我成功了。但是，边缘看起来像是一个 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。

我是画布的新手，所以我想它可能是我...... 如果我在这里做错了什么，有人可以告诉我吗？

谢谢！

Answer 1

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

可能的解决方法：

• 使用您现在的方法，但在完成楔形后在中间放置一个白色圆圈以消除内部不规则性
• 使用 Kinetic.Wedge 代替 context.arc。