在javascript画布上的椭圆内剪切线[重复]

Question

我正在 javascript 画布上绘制一个实心椭圆（使用 arc()）：

ctx.arc(centerX, centerY, dotDiameter / 2, 0, 2 * Math.PI, false);
ctx.fillStyle = color1;
ctx.fill();

然后我想用不同的颜色画一条线，剪裁到这个椭圆上。

ctx.clip(); // Clip to the ellipse
ctx.strokeStyle = color2;
ctx.moveTo(centerX - dotRadius, centerY);
ctx.lineTo(centerX + dotRadius, centerY);
ctx.stroke();

不过，椭圆也是用 color2 描边的。

如何将线条剪裁到我的椭圆上，但又不画出椭圆？有没有办法在我调用 clip() 后从画布上删除椭圆（又名弧线）？

谢谢！

（仅供参考，这是对我的代码的过度简化。描边的线条比单个水平线更复杂，并且确实需要修剪线条。）

Answer 1

我们可以用一些基本的三角函数来计算椭圆周长上的一个点......

  ctx.moveTo(x, y);
  x += radiusX * Math.cos(lineangle)
  y += radiusY * Math.sin(lineangle)
  ctx.lineTo(x, y);

参见下面的代码 sn-p，我正在绘制一个椭圆和一条从中心到边缘的线。

ctx = document.getElementById('c').getContext('2d');
ctx.lineWidth = 2;

function draw(x, y, radiusX, radiusY, lineangle, color1, color2) {
  ctx.beginPath()
  ctx.ellipse(x, y, radiusX, radiusY, 0, 0, 2 * Math.PI, false);
  ctx.fillStyle = color1;
  ctx.fill();

  ctx.beginPath()
  ctx.strokeStyle = color2;
  ctx.moveTo(x, y);
  x += radiusX * Math.cos(lineangle)
  y += radiusY * Math.sin(lineangle)
  ctx.lineTo(x, y);
  ctx.stroke();
}

angle = 0
function loop() {
  ctx.clearRect(0,0, 500, 500);
  draw(80, 80, 70, 50, angle, "red", "lime")
  draw(240, 60, 80, 30, angle*0.7, "black", "cyan")
  draw(360, 80, 30, 70, angle*2, "white", "black")
  angle += 0.05 
}

setInterval(loop, 100)

<canvas height="160" width="500" id="c">