2

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

我是画布新手，所以我想它可能是我......有人可以让我知道我在这里做错了什么吗？

谢谢！

4

1 回答 1

2

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

可能的解决方法：

  • 使用你现在的方法，但是一旦你完成了楔子，在中间放一个白色圆圈来涂抹内部的不规则性
  • 使用Kinetic.Wedge而不是 context.arc。
于 2013-02-11T20:58:13.950 回答