SVG 및 CANVAS에서 동일한 곡선 만들기

Question

SVG 및 CANVAS에서 동일한 곡선을 만드는 데 문제가 있습니다. I 그래프 d3js 힘 레이아웃을 가지며, 힘 틱 I는 SVG 곡선 값을 제조 방법

     link.attr("d", function (d) { 
         var dx = d.target.x - d.source.x, 
          dy = d.target.y - d.source.y, 
          dr = Math.sqrt(dx * dx + dy * dy), 
          normX = dx/((dr != 0) ? dr : 1), 
          normY = dy/((dr != 0) ? dr : 1), 
          sourcePadding = d.left ? 50 : 5, 
          targetPadding = d.right ? 50 : 5, 
          sourceX = d.source.x + (sourcePadding * normX), 
          sourceY = d.source.y + (sourcePadding * normY), 
          targetX = d.target.x - (targetPadding * normX), 
          targetY = d.target.y - (targetPadding * normY); 

         return "M" + 
          sourceX + "," + 
          sourceY + "A" + 
          dr + "," + dr + " 0 0,1 " + 
          targetX + "," + 
          targetY;}); 

방법 I 캔버스 동일한 곡선을 만들 수 있는가? 나는 이것을 시도하지만 아무 일도하지 않는다 :

    edges.forEach(function (d) { 
         // Draw a line from source to target. 
         context.beginPath(); 
         context.fillStyle = d.color; 
         // context.quadraticCurveTo(288, 0, 388, 150); 
         context.moveTo(d.source.x, d.source.y); 
         context.quadraticCurveTo(d.source.y, d.source.y - 50, d.target.x, d.target.y); 
         // context.lineTo(d.target.x, d.target.y); 
         context.stroke(); 
        }); 

고마워!

가 해결 JsFiddle SVG on the left canvas on right이 솔루션은 여기에 있습니다 : :

는 jdFidlle SVG/CANVAS 있습니다SOLUTION 하지만 곡선의 끝 부분에 화살표와 함께 문제가 있습니다. 아무도 이걸 도와 줄 수 있니? 나는 몹시 괴롭히는 것에 mayby ​​문제가 있다고 생각한다. 감사 !

Answer 1

SVG 2 차 곡선 명령은 Q가 아닌 A (타원형 호)입니다. 캔버스의 원호는 arc or arcTo을 사용하여 그려집니다.