在html5画布中填充形状

Question

我正在使用画布。我在屏幕截图中绘制了一个形状，但如果我尝试填充它，则填充错误，如屏幕截图所示。

这是我的代码

<canvas id="myCanvas" width="800" height="650" style="border:1px solid #d3d3d3;">

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.save();
ctx.beginPath();
ctx.moveTo(81.75, 319.5);
ctx.arc(198, 319.5, 116.25, -3.140796326794897, 0.0007963267948964958, false);
ctx.lineTo(210.91666666666666,319.5);
ctx.moveTo(81.75, 319.5);  
ctx.arc(198, 319.5, 12.916666666666668, -3.140796326794897, 0.0007963267948964958, false);     

ctx.strokeStyle = "#00ff00";
ctx.fillStyle = "#00ff00";
//ctx.fill();              - Here the problem is
ctx.stroke();
ctx.restore();


</script>

请提供解决方案以克服此问题。 感谢。

Answer 1

您可以通过绘制圆弧并用形状填充来绘制此形状。

  var canvas = document.getElementById('Canvas');
  var context = canvas.getContext('2d');

 // Variables store centre and radius of arc
  var x = 250;
  var y = 225;
  var radius =100;

 // define start and finish angle
  var startAngle = 1 * Math.PI;
  var endAngle = 2. * Math.PI;

 // set the direction to anticlockwise
  var counterClockwise = true;

  context.beginPath();
  context.arc(x, y, radius, startAngle, endAngle);
  context.lineWidth =150;


  context.strokeStyle = '#fa4b2a';
  context.stroke();