Javascript 在html5画布中填充弧线

我想用html5画布画一个这样的形状

但我不想使用曲线。 有没有办法用圆弧函数画出来

或者至少我怎样才能画出一条曲线，就像我给了一个弧函数的中心点和半径一样

---

非常感谢。

这会有所帮助，请尝试以下方法：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = 75;
  var startAngle = 0 * Math.PI;
  var endAngle = 1 * Math.PI;
  var counterClockwise = false;

  context.beginPath();
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  context.lineTo(x - radius, 200);
  context.lineTo(x + radius, 200);
  context.closePath();
  context.stroke();
  context.fillStyle = 'red';
  context.fill();
</script>

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var x=画布宽度/2；
变量y=画布高度/2；
var半径=75；
var startAngle=0*Math.PI；
var endAngle=1*Math.PI；
var逆时针=假；
context.beginPath（）；
弧（x，y，半径，星形，端角，逆时针）；
lineTo（x-半径，200）；
lineTo（x+半径，200）；
closePath（）；
stroke（）；
context.fillStyle='red'；
context.fill（）；

@StealingMana的答案很好，但你也可以看到你所展示的图形是一个矩形，上面画着一个被剪去的弧/圆。根据要显示的图形，使用剪裁可能更容易。如果你感兴趣的话，我可以发布代码。我只是把它拼成一个形状。尽管@GameAlchemist是你的右手，但如果你使用剪裁方法，你也可以更轻松地将形状居中/对齐。