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

Posted 2023-03-23

【中文标题】在javascript画布上的椭圆内剪切线[重复]

【英文标题】：Clipping lines within ellipse on javascript canvas [duplicate]

【发布时间】：2020-07-12 07:07:06

【问题描述】：

我正在 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() 后从画布上删除椭圆（又名弧线）？

谢谢！

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

【问题讨论】：

a ctx.arc( 不会画椭圆

@HelderSepulveda：请参阅developer.mozilla.org/en-US/docs/Web/API/…，了解使用 arc() 绘制圆（和圆的一部分）。

嗨史蒂夫，是的，但你说的是椭圆......弧不会做椭圆

【参考方案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">

【讨论】：

谢谢你，但我做的不仅仅是线条，所以更喜欢在椭圆区域内剪辑，使用描边，而不是描边椭圆区域。

@SteveA 此代码只是向您展示背后数学的基础...您可以画出椭圆，也可以不画，这取决于您