javascript - 试图在 Canvas 中绘制弧线 - 奇怪的行为

Question

我正在尝试用圆弧做一个圆(类似于圆环图的东西是我试图在视觉上实现的)并且我成功了。但是，边缘看起来像 4 岁的 child 画的!

这就是我绘制弧线的方式:

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 .

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

谢谢!

Answer 1

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

可能的解决方法:

• 使用你现在的方法，但是一旦你完成了楔子，就在中间放一个白色的圆圈，以消除内部的不规则
• 使用Kinetic.Wedge而不是 context.arc。