Disegno di archi perfettamente circolari con HTML5 Canvas + KineticJS

Question

Attualmente sto cercando di disegnare gli archi utilizzando la struttura di canvas KineticJS. Il problema che sto avendo è che questi archi non sono così circolari "perfettamente" come richiesto.

Stanno essendo attirato come segue:

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

sapevo che questo sarebbe stato un problema dato che non esiste una cosa come il rendering di un cerchio quasi perfetto su un supporto a base di pixel senza l'uso di anti-aliasing sulla corsa

stavo vagando se questo problema potrebbe essere risolto mediante rendering con grafica vettoriale o se ci fosse una soluzione alternativa?

Ho incluso un JSFiddle per delineare questo problema, i cerchi sono animati ruotando intorno al proprio asse. Questo effetto è più evidente con gli archi che appaiono "oscillare" mentre ruotano.

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

Answer 1

Potrebbe l'oscillazione essere un'illusione ottica.

È stato aggiunto un cerchio nero stazionario attorno all'animazione.

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

La tua oscillazione attraversa il cerchio nero in qualsiasi punto o lascia uno spazio?

Nuovo violino http://jsfiddle.net/EHDFV/1/