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/

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

1 个答案: