使用HTML5 Canvas + KineticJS绘制完美的圆弧

Question

我目前正在尝试使用KineticJS画布框架绘制弧线。 我遇到的问题是这些弧线并不像所需的那样“完美”圆形。

他们被抽出如下：

var redArc = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI / 2, true);    // Arc of 270°
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(255,0,0)',
    strokeWidth: 20,
    offset: [x, y]
});

我知道这可能是一个问题，因为没有在基于像素的介质上渲染近乎完美的圆而没有在笔划上使用抗锯齿

如果这个问题可以通过使用矢量图形渲染或者是否有替代解决方案来解决，那么我在徘徊？

我已经包含了一个JSFiddle来概述这个问题，这些圆圈正在围绕它们的轴旋转动画。 当圆弧在旋转时看起来“摆动”时，这种效果更明显。

JSFiddle： http ： //jsfiddle.net/EHDFV/

Answer 1

摆动可能是一种视错觉。

在动画周围添加了一个固定的黑色圆圈。

var blackCircle = new Kinetic.Shape({
    drawFunc: function (canvas) {
        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.arc(x, y, (r + 10), 0, 2 * Math.PI, true);
        canvas.fillStroke(this);
    },
    x: x,
    y: y,
    stroke: 'rgb(0,0,0)',
    strokeWidth: 1,
    offset: [x, y]
});

你的摆动是否会在任何一点穿过黑色圆圈或留下间隙？

新小提琴http://jsfiddle.net/EHDFV/1/