сделать ту же самую кривую в SVG и холстом

Question

У меня есть проблема с создать такую ​​же кривую в SVG и Canvas. У меня есть график, d3js расположение силы, и силы клеща метода готовится значение кривого 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;}); 

Как я могу создать то же кривой в CANVAS? Я пробую это, но это не работает:

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

Спасибо за помощь!

Существует jdFidlle SVG/CANVAS: JsFiddle SVG on the left canvas on right

решаемые, решение здесь:SOLUTION Но у меня есть проблемы со стрелками, на конце кривой. Может ли кто-нибудь помочь мне в этом? Я думаю, что есть проблема с raduis. Благодаря !

Answer 1

квадратичные кривые команды SVG является Q, а не А (который является эллиптической дугой). Дугу в холсте можно нарисовать, используя arc or arcTo.