Zeichnen von perfekten Kreisbögen mit HTML5 Canvas + KineticJS

Question

Ich versuche gerade, Bögen mit dem KineticJS-Canvas-Framework zu zeichnen. Das Problem, das ich habe, ist, dass diese Bögen nicht annähernd so "perfekt" kreisförmig wie erforderlich sind.

Sie sind werden wie folgt gezogen:

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

Ich wusste, dass dies ein Problem gewesen, da ist es nicht so etwas zu einem nahezu perfekten Kreis auf einem Pixel-basierten Medium ohne die Verwendung als Rendering Anti-Aliasing auf dem Strich

Ich war herumwandern, wenn dieses Problem durch Rendern mit Vektorgrafiken gelöst werden könnte oder wenn es eine alternative Lösung gab?

Ich habe eine JSFiddle enthalten, um dieses Problem zu skizzieren, die Kreise werden animiert, sich um ihre Achse zu drehen. Dieser Effekt ist offensichtlicher, wenn der (die) Bogen (Bogen) beim Drehen "wackeln".

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

Answer 1

Könnte die Wobble eine optische Täuschung sein.

Fügen Sie einen stationären schwarzen Kreis um Ihre Animation hinzu.

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

Kann Ihr Wobble den schwarzen Kreis an irgendeiner Stelle kreuzen oder eine Lücke hinterlassen?

Neue Geige http://jsfiddle.net/EHDFV/1/