Рисование идеально круглых дуг с помощью 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/