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