Rysowanie idealnie okrągłych łuków za pomocą HTML5 Canvas + KineticJS

Question

Aktualnie próbuję rysować łuki za pomocą struktury obszaru roboczego KineticJS. Problem, który mam, polega na tym, że te łuki nie są tak dokładnie "idealnie" okrągłe, jak jest to wymagane.

Oni zostaje wyssany następująco:

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] 
}); 

Wiedziałem, że to może być problem, ponieważ nie ma czegoś takiego jak rendering niemal idealny okrąg na nośniku opartym na piksel bez użycia wygładzanie w skoku

Błąkałem się, czy problem można rozwiązać przez renderowanie z grafiką wektorową lub czy było alternatywne rozwiązanie?

Dołączam JSFiddle, aby przedstawić ten problem, a koła są animowane, obracając się wokół własnej osi. Efekt ten jest bardziej widoczny, gdy łuk (y) pojawiają się podczas obrotu "chybotania".

JSFiddle: http://jsfiddle.net/EHDFV/

Answer 1

Czyżby kołysanie być złudzenie optyczne.

Dodałem stacjonarny czarny okrąg wokół animacji.

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] 
}); 

Czy Twoje chybotanie przechodzi przez czarne kółko w dowolnym punkcie lub pozostawia lukę?

Nowy skrzypce http://jsfiddle.net/EHDFV/1/