改变弧形角度(画布)

时间:2014-07-17 19:51:15

标签: jquery html html5 canvas html5-canvas

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

预期图片

enter image description here

以下是Semi arc的HTML代码

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

JSFIDDLE LINK

提前致谢 诗

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

该曲线可以使用context.quadraticCurveTohttp://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);
}

答案 2 :(得分:0)

感谢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;问候 诗