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。

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

1 个答案: