改变弧形角度（画布）

Question

我正在使用Canvas创建Semi Arc我的查询是我需要根据预期的图像更改弧的整体角度

预期图片

以下是Semi arc的HTML代码

<canvas id="myCanvas" width="578" height="250"></canvas>

JSFIDDLE LINK

提前致谢 诗

Answer 1

您将要使用bezierCurveTo功能。 Here这是一个很好的资源，因为你可能需要调整代码以获得你想要的曲线。

Answer 2

该曲线可以使用context.quadraticCurveTo：http://jsfiddle.net/m1erickson/f8fDj/

进行近似

// x,y are the left,top point of the arc

function myCurve(x,y){    
    ctx.translate(x,y);
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.quadraticCurveTo(85,18,150,0);
    ctx.stroke();
    ctx.translate(-x,-y);
}

Answer 3

感谢Mark提供解决方案。

这是解决方案

 var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');    
 myCurve();

 function myCurve(x,y){    
  ctx.translate(x,y);
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.quadraticCurveTo(85,18,150,0);
  ctx.stroke();
  ctx.translate(-x,-y);

}

谢谢＆amp;问候 诗