在html5画布中填充圆弧的轮廓答案

【问题标题】：fill ouline of arc in html5 canvas在html5画布中填充圆弧的轮廓
【发布时间】：2014-08-16 17:17:01
【问题描述】：

我想用 html5 画布画出这样的形状

但我不想使用曲线。有什么方法可以用弧函数画出来吗？

或者至少我如何绘制一条曲线，就像我给圆弧函数的中心点和半径一样。

谢谢一百万。

【问题讨论】：

@StealingMana 的答案很好，但人们也可以看到你显示的图形是一个用弧形/圆剪掉的矩形。根据您要显示的图形，使用剪辑可能会更容易。如果您有兴趣，我可以发布代码。
我只是把它拍成了一个形状。尽管@GameAlchemist，您的权利，如果您使用剪切方法，您还可以更轻松地居中/对齐形状。

标签： javascript html canvas graphics html5-canvas

【解决方案1】：

这应该有帮助，试试这个：

<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>

【讨论】：