HTML5 Canvas + KineticJS ile mükemmel dairesel yaylar çizme

Question

KineticJS tuval çerçevesini kullanarak arkları çizmeye çalışıyorum. Sorun şu ki, bu yaylar gerektiği kadar "mükemmel" dairesel değildir. aşağıdaki gibi

Dışarı çekiliyor ediyoruz:

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

Ben kullanılmadan piksel tabanlı ortamda mükemmele yakın daire render diye bir şey yoktur çünkü bu bir sorun olabileceğini biliyordu Bu konu vektör grafikleri ile ya da alternatif bir çözüm olsaydı render çözülebilmesi, eğer inme

ben dolaşıyordum anti-aliasing?

Ben bu sorunu ana hatlarıyla bir JSFiddle yer verdik, daireler kendi ekseni etrafında dönen animasyonlu edilmektedir. Bu etki, yay (lar) dönerken "yalpalamak" üzere görünen ile daha belirgindir.

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

Answer 1

yalpalama bir optik yanılsama olabilir.

Animasyonunuzun çevresinde sabit bir siyah daire eklediniz.

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

Senin yalpalama siyah çemberi herhangi bir noktada çapraz mı yoksa bir boşluk mu bırakıyor? fillStroke çağrıldıktan sonra

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