像fillRect一样的行为

Question

对于圆形的矩形，我希望与seen here具有相同的行为。 所以我想画一个halfCircle，我想动态填充两行之间封装的区域。

看起来这应该是基于某些动作动态填充的绿色：

所以我希望能够设定这个半音高度的一半只用颜色填充，然后是70％等......比如进度条。

我试过这样：

    ctx.beginPath();

    ctx.arc(centerCoordinate.x, centerCoordinate.y, circleRadius, 0, Math.PI, false);

    var cirlceEndpoint = getCircleEndPoint(centerCoordinate, Math.PI);
    ctx.lineTo(cirlceEndpoint[0] + 20, cirlceEndpoint[1]);
    ctx.moveTo(centerCoordinate.x + circleRadius, centerCoordinate.y);

    ctx.arc(centerCoordinate.x, centerCoordinate.y, circleRadius - 20, 0, Math.PI, false);
    ctx.moveTo(centerCoordinate.x + circleRadius, centerCoordinate.y);
    ctx.closePath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#000";
    ctx.fillStyle = '#8ED6FF';
    ctx.fill();

    ctx.stroke();

但是这样就可以填满整个半圆，而不仅仅是线之间的区域。

我怎么能这样做？

Answer 1

您需要向arc()函数提供正确的std::thread first(foo, &udp); 标记：

anticlockwise

// Draw arc segment with given inner and outer radius and start and end angle:
function drawArc(ctx, x, y, inner, outer, start, end) {
  if (start > end) [end, start] = [start, end];

  ctx.beginPath();
  ctx.arc(x, y, outer, start, end, false);
  if (end < start + 2 * Math.PI) {
    ctx.lineTo(x + Math.cos(end) * inner, y + Math.sin(end) * inner);
  } else {
    ctx.moveTo(x + Math.cos(end) * inner, y + Math.sin(end) * inner);
  }
  ctx.arc(x, y, inner, end, start, true);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
}

// Example:
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

function frame(time) {
  ctx.fillStyle = "red";
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawArc(ctx, canvas.width / 2, canvas.height / 2, 40, 60, 0, time * 0.001);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);