使用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/

- zesda

---

@Philipp 我明白你的意思，我不确定KineticJS是否自动处理，但在fillStroke()方法后包含ctx.endPath()会破坏原始的JSFiddle... - zesda

@alex.dominte 不一定，我之前已经用Canvas和JS重新创建了同样的东西。最初吸引我的只是KineticJS及其处理多层动画的能力（我希望在这个项目中继续使用它）。 - zesda

@Philipp 我认为没有什么叫做 .endPath()。 - Pointy

好的，我的错。我查了一下w3c规范，确实没有endPath方法。beginPath也会结束当前路径。不知道我从哪里得到这个信息，可能是其他图形API。对此感到抱歉。 - Philipp

我可能错了，但是你的“摇晃”实际上是由于反锯齿引起的。在画布上，你无法关闭反锯齿，因此浏览器会尝试使用部分彩色像素来渲染你的圆形，这些像素会“溢出”纯圆形路径。当我在画布上渲染文本时，我遇到了这个问题。某些文本（主要是带有曲线的文本）看起来模糊，最终我追踪到了浏览器的反锯齿。我的研究表明，在画布上无法关闭A-A。在渲染SVG文本时，您可以关闭A-A。您可以检查是否可以在渲染SVG路径时执行相同操作。 - markE

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/

- jing3142

---

你在红色弧线上面添加了一个黑色圆圈，看起来“晃动”范围在正负1像素内（因为描边的宽度是1像素），但确实存在。如果你把黑色圆圈添加到红色弧线后面的图层中，这个现象就会变得更加明显。 - zesda