HTML5キャンバス+ 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/