HTML5로 완벽한 원호 그리기 Canvas + 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] 
}); 

임의의 지점에서 워블이 검은 색 원을 교차합니까? fillStroke를 호출 한 후

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